diff --git a/app/(app)/products/[id]/sprint/page.tsx b/app/(app)/products/[id]/sprint/page.tsx
index 40cbac8..6ea9ee1 100644
--- a/app/(app)/products/[id]/sprint/page.tsx
+++ b/app/(app)/products/[id]/sprint/page.tsx
@@ -3,8 +3,7 @@ import { cookies } from 'next/headers'
 import { getIronSession } from 'iron-session'
 import { SessionData, sessionOptions } from '@/lib/session'
 import { prisma } from '@/lib/prisma'
-import { SplitPane } from '@/components/split-pane/split-pane'
-import { SprintBacklogLeft, SprintBacklogRight } from '@/components/sprint/sprint-backlog'
+import { SprintBacklogClient } from '@/components/sprint/sprint-backlog-client'
 import { SprintHeader } from '@/components/sprint/sprint-header'
 import type { SprintStory, PbiWithStories } from '@/components/sprint/sprint-backlog'
 import Link from 'next/link'
@@ -69,7 +68,7 @@ export default async function SprintBacklogPage({ params }: Props) {
       })),
     }))
 
-  const sprintStoryIds = new Set<string>(sprintStories.map((s: (typeof sprintStories)[number]) => s.id))
+  const sprintStoryIdList = sprintStories.map((s: (typeof sprintStories)[number]) => s.id)
   const isDemo = session.isDemo ?? false
 
   return (
@@ -83,26 +82,13 @@ export default async function SprintBacklogPage({ params }: Props) {
       />
 
       <div className="flex-1 overflow-hidden">
-        <SplitPane
-          storageKey={`sprint-${id}`}
-          left={
-            <SprintBacklogLeft
-              sprintId={sprint.id}
-              stories={sprintStoryItems}
-              isDemo={isDemo}
-              selectedStoryId={null}
-              onSelectStory={() => {}}
-            />
-          }
-          right={
-            <SprintBacklogRight
-              sprintId={sprint.id}
-              pbisWithStories={pbisWithStories}
-              sprintStoryIds={sprintStoryIds}
-              isDemo={isDemo}
-              onStoryAdded={() => {}}
-            />
-          }
+        <SprintBacklogClient
+          productId={id}
+          sprintId={sprint.id}
+          stories={sprintStoryItems}
+          pbisWithStories={pbisWithStories}
+          sprintStoryIdList={sprintStoryIdList}
+          isDemo={isDemo}
         />
       </div>
 
diff --git a/components/sprint/sprint-backlog-client.tsx b/components/sprint/sprint-backlog-client.tsx
new file mode 100644
index 0000000..c88066c
--- /dev/null
+++ b/components/sprint/sprint-backlog-client.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import { SplitPane } from '@/components/split-pane/split-pane'
+import { SprintBacklogLeft, SprintBacklogRight } from './sprint-backlog'
+import type { SprintStory, PbiWithStories } from './sprint-backlog'
+
+interface SprintBacklogClientProps {
+  productId: string
+  sprintId: string
+  stories: SprintStory[]
+  pbisWithStories: PbiWithStories[]
+  sprintStoryIdList: string[]
+  isDemo: boolean
+}
+
+export function SprintBacklogClient({
+  productId,
+  sprintId,
+  stories,
+  pbisWithStories,
+  sprintStoryIdList,
+  isDemo,
+}: SprintBacklogClientProps) {
+  const sprintStoryIds = new Set<string>(sprintStoryIdList)
+
+  return (
+    <SplitPane
+      storageKey={`sprint-${productId}`}
+      left={
+        <SprintBacklogLeft
+          sprintId={sprintId}
+          stories={stories}
+          isDemo={isDemo}
+          selectedStoryId={null}
+          onSelectStory={() => {}}
+        />
+      }
+      right={
+        <SprintBacklogRight
+          sprintId={sprintId}
+          pbisWithStories={pbisWithStories}
+          sprintStoryIds={sprintStoryIds}
+          isDemo={isDemo}
+          onStoryAdded={() => {}}
+        />
+      }
+    />
+  )
+}