diff --git a/app/(app)/products/[id]/page.tsx b/app/(app)/products/[id]/page.tsx
index b5041e8..e0db775 100644
--- a/app/(app)/products/[id]/page.tsx
+++ b/app/(app)/products/[id]/page.tsx
@@ -1,3 +1,4 @@
+import { Suspense } from 'react'
 import { notFound, redirect } from 'next/navigation'
 import { getSession } from '@/lib/auth'
 import { getAccessibleProduct } from '@/lib/product-access'
@@ -7,17 +8,24 @@ import { SplitPane } from '@/components/split-pane/split-pane'
 import { PbiList } from '@/components/backlog/pbi-list'
 import { StoryPanel } from '@/components/backlog/story-panel'
 import type { Story } from '@/components/backlog/story-panel'
+import { TaskPanel } from '@/components/backlog/task-panel'
 import { BacklogHydrationWrapper } from '@/components/backlog/backlog-hydration-wrapper'
+import { TaskDialog } from '@/app/_components/tasks/task-dialog'
+import { EditTaskLoader } from '@/app/_components/tasks/edit-task-loader'
+import { TaskDialogSkeleton } from '@/app/_components/tasks/task-dialog-skeleton'
 import { StartSprintButton } from '@/components/sprint/start-sprint-button'
 import { ActivateProductButton } from '@/components/shared/activate-product-button'
 import Link from 'next/link'
 
 interface Props {
   params: Promise<{ id: string }>
+  searchParams: Promise<{ newTask?: string; storyId?: string; editTask?: string }>
 }
 
-export default async function ProductBacklogPage({ params }: Props) {
+export default async function ProductBacklogPage({ params, searchParams }: Props) {
   const { id } = await params
+  const { newTask, storyId: storyIdParam, editTask } = await searchParams
+  const closePath = `/products/${id}`
   const session = await getSession()
   if (!session.userId) redirect('/login')
 
@@ -123,8 +131,8 @@ export default async function ProductBacklogPage({ params }: Props) {
         >
           <SplitPane
             cookieKey={`backlog-${id}`}
-            defaultSplit={[20, 80]}
-            tabLabels={['Backlog', 'Stories']}
+            defaultSplit={[20, 45, 35]}
+            tabLabels={['PBI\'s', 'Stories', 'Taken']}
             panes={[
               <PbiList
                 key="pbi"
@@ -138,10 +146,37 @@ export default async function ProductBacklogPage({ params }: Props) {
                 storiesByPbi={storiesByPbi}
                 isDemo={isDemo}
               />,
+              <TaskPanel
+                key="tasks"
+                productId={id}
+                isDemo={isDemo}
+                closePath={closePath}
+              />,
             ]}
           />
         </BacklogHydrationWrapper>
       </div>
+
+      {newTask && (
+        <TaskDialog
+          storyId={storyIdParam}
+          productId={id}
+          closePath={closePath}
+          isDemo={isDemo}
+        />
+      )}
+
+      {editTask && !newTask && (
+        <Suspense fallback={<TaskDialogSkeleton />}>
+          <EditTaskLoader
+            taskId={editTask}
+            userId={session.userId}
+            productId={id}
+            closePath={closePath}
+            isDemo={isDemo}
+          />
+        </Suspense>
+      )}
     </div>
   )
 }