diff --git a/components/ReportView.tsx b/components/ReportView.tsx
index ed920c2..71ecc29 100644
--- a/components/ReportView.tsx
+++ b/components/ReportView.tsx
@@ -24,6 +24,7 @@ import {
   MEMBERS_ACTUAL_NAME,
   MEMBERS_GOAL_NAME,
 } from "./report/MembershipChart";
+import { LoadingState, EmptyState, ErrorState } from "./report/ReportStates";
 
 interface ReportViewProps {
   config: FormConfig;
@@ -483,39 +484,3 @@ function MobileStem({ show, state }: { show: boolean; state: PathwayState }) {
   );
 }
 
-function LoadingState() {
-  return (
-    <div className="rounded-lg border border-rule bg-paper px-6 py-12 text-center">
-      <div
-        aria-hidden
-        className="mx-auto mb-4 h-7 w-7 animate-spin rounded-full border-[1.5px] border-rule border-t-leaf-700"
-      />
-      <p className="font-display text-base text-ink-soft italic">Loading your activity report…</p>
-    </div>
-  );
-}
-
-function EmptyState() {
-  return (
-    <div className="rounded-lg border border-dashed border-rule bg-paper-2/30 px-6 py-10 text-center">
-      <p className="font-display text-lg text-ink-soft">No entries on file yet.</p>
-      <p className="mt-2 text-sm text-ink-mute">
-        Your co-op&apos;s first survey will appear here once it&apos;s submitted.
-      </p>
-    </div>
-  );
-}
-
-function ErrorState({ message }: { message: string }) {
-  return (
-    <div role="alert" className="rounded-lg border-2 border-clay-200 bg-clay-100/30 px-6 py-7">
-      <h2 className="font-display text-xl font-medium text-clay-700">
-        We couldn&apos;t open your report.
-      </h2>
-      <p className="mt-3 text-sm leading-relaxed text-ink-soft">{message}</p>
-      <p className="mt-4 text-sm text-ink-soft">
-        If this keeps happening, please contact your <a href="mailto:chris@fci.coop">Chris @ FCI</a>.
-      </p>
-    </div>
-  );
-}
diff --git a/components/report/ReportStates.tsx b/components/report/ReportStates.tsx
new file mode 100644
index 0000000..284b6f0
--- /dev/null
+++ b/components/report/ReportStates.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+export function LoadingState() {
+  return (
+    <div className="rounded-lg border border-rule bg-paper px-6 py-12 text-center">
+      <div
+        aria-hidden
+        className="mx-auto mb-4 h-7 w-7 animate-spin rounded-full border-[1.5px] border-rule border-t-leaf-700"
+      />
+      <p className="font-display text-base text-ink-soft italic">Loading your activity report…</p>
+    </div>
+  );
+}
+
+export function EmptyState() {
+  return (
+    <div className="rounded-lg border border-dashed border-rule bg-paper-2/30 px-6 py-10 text-center">
+      <p className="font-display text-lg text-ink-soft">No entries on file yet.</p>
+      <p className="mt-2 text-sm text-ink-mute">
+        Your co-op&apos;s first survey will appear here once it&apos;s submitted.
+      </p>
+    </div>
+  );
+}
+
+export function ErrorState({ message }: { message: string }) {
+  return (
+    <div role="alert" className="rounded-lg border-2 border-clay-200 bg-clay-100/30 px-6 py-7">
+      <h2 className="font-display text-xl font-medium text-clay-700">
+        We couldn&apos;t open your report.
+      </h2>
+      <p className="mt-3 text-sm leading-relaxed text-ink-soft">{message}</p>
+      <p className="mt-4 text-sm text-ink-soft">
+        If this keeps happening, please contact your <a href="mailto:chris@fci.coop">Chris @ FCI</a>.
+      </p>
+    </div>
+  );
+}