diff --git a/frontend/package.json b/frontend/package.json
index 028a24ad9..38e1b37fc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -59,6 +59,7 @@
     "sonner": "^1.4.3",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index a9331b876..13179a019 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -131,6 +131,9 @@ dependencies:
   tailwindcss-animate:
     specifier: ^1.0.7
     version: 1.0.7(tailwindcss@3.4.1)
+  vaul:
+    specifier: ^0.9.0
+    version: 0.9.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
   zod:
     specifier: ^3.22.4
     version: 3.22.4
@@ -7031,6 +7034,20 @@ packages:
       sade: 1.8.1
     dev: false
 
+  /vaul@0.9.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-bZSySGbAHiTXmZychprnX/dE0EsSige88xtyyL3/MCRbrFotRPQZo7UdydGXZWw+CKbNOw5Ow8gwAo93/nB/Cg==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+    dev: false
+
   /vfile-location@4.1.0:
     resolution: {integrity: sha512-YF23YMyASIIJXpktBa4vIGLJ5Gs88UB/XePgqPmTa7cDA+JeO3yclbpheQYCHjVHBn/yePzrXuygIL+xbvRYHw==}
     dependencies:
diff --git a/frontend/src/app/workflows/[id]/cases/page.tsx b/frontend/src/app/workflows/[id]/cases/page.tsx
index f50b3657d..7a619165a 100644
--- a/frontend/src/app/workflows/[id]/cases/page.tsx
+++ b/frontend/src/app/workflows/[id]/cases/page.tsx
@@ -5,9 +5,10 @@ import { DefaultQueryClientProvider } from "@/providers/query"
 import { WorkflowProvider } from "@/providers/workflow"
 import { z } from "zod"
 
+import { Separator } from "@/components/ui/separator"
 import { columns } from "@/components/cases/columns"
 import { DataTable } from "@/components/cases/data-table"
-import { taskSchema } from "@/components/cases/data/schema"
+import { caseSchema } from "@/components/cases/data/schema"
 import { Navbar } from "@/components/navbar"
 
 export const metadata: Metadata = {
@@ -19,7 +20,7 @@ async function getTasks() {
     path.join(process.cwd(), "src/components/cases/data/tasks.json")
   )
   const tasks = JSON.parse(data.toString())
-  return z.array(taskSchema).parse(tasks)
+  return z.array(caseSchema).parse(tasks)
 }
 
 export default async function CasesPage() {
@@ -31,7 +32,7 @@ export default async function CasesPage() {
         <WorkflowProvider>
           <div className="flex h-screen flex-col">
             <Navbar />
-            <div className="w-full flex-1 space-y-8 p-8">
+            <div className="flex-1 px-16 py-24">
               <DataTable data={tasks} columns={columns} />
             </div>
           </div>
diff --git a/frontend/src/components/cases/columns.tsx b/frontend/src/components/cases/columns.tsx
index 7dec285e3..5ba9da3b9 100644
--- a/frontend/src/components/cases/columns.tsx
+++ b/frontend/src/components/cases/columns.tsx
@@ -2,12 +2,10 @@
 
 import { ColumnDef } from "@tanstack/react-table"
 
-import { Badge } from "@/components/ui/badge"
 import { Checkbox } from "@/components/ui/checkbox"
 
 import { DataTableColumnHeader } from "./data-table-column-header"
-import { DataTableRowActions } from "./data-table-row-actions"
-import { labels, priorities, statuses } from "./data/data"
+import { priorities, statuses } from "./data/data"
 import { Task } from "./data/schema"
 
 export const columns: ColumnDef<Task>[] = [
@@ -38,29 +36,13 @@ export const columns: ColumnDef<Task>[] = [
   {
     accessorKey: "id",
     header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Task" />
+      <DataTableColumnHeader className="text-xs" column={column} title="ID" />
     ),
-    cell: ({ row }) => <div className="w-[80px]">{row.getValue("id")}</div>,
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: "title",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Title" />
+    cell: ({ row }) => (
+      <div className="w-[60px] text-xs">&#x23; {row.getValue("id")}</div>
     ),
-    cell: ({ row }) => {
-      const label = labels.find((label) => label.value === row.original.label)
-
-      return (
-        <div className="flex space-x-2">
-          {label && <Badge variant="outline">{label.label}</Badge>}
-          <span className="max-w-[500px] truncate font-medium">
-            {row.getValue("title")}
-          </span>
-        </div>
-      )
-    },
+    enableSorting: true,
+    enableHiding: false,
   },
   {
     accessorKey: "status",
@@ -79,9 +61,9 @@ export const columns: ColumnDef<Task>[] = [
       return (
         <div className="flex w-[100px] items-center">
           {status.icon && (
-            <status.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+            <status.icon className="mr-2 h-3 w-3 text-muted-foreground" />
           )}
-          <span>{status.label}</span>
+          <span className="text-xs">{status.label}</span>
         </div>
       )
     },
@@ -106,9 +88,9 @@ export const columns: ColumnDef<Task>[] = [
       return (
         <div className="flex items-center">
           {priority.icon && (
-            <priority.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+            <priority.icon className="mr-2 h-3 w-3 text-muted-foreground" />
           )}
-          <span>{priority.label}</span>
+          <span className="text-xs">{priority.label}</span>
         </div>
       )
     },
@@ -117,7 +99,93 @@ export const columns: ColumnDef<Task>[] = [
     },
   },
   {
-    id: "actions",
-    cell: ({ row }) => <DataTableRowActions row={row} />,
+    accessorKey: "title",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Case Title" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <div className="flex space-x-2">
+          <span className="max-w-[300px] truncate text-xs">
+            {row.getValue("title")}
+          </span>
+        </div>
+      )
+    },
+  },
+  {
+    accessorKey: "payload",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Payload" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <div className="flex space-x-2">
+          <span className="max-w-[300px] truncate text-xs text-muted-foreground">
+            {row.getValue("payload")}
+          </span>
+        </div>
+      )
+    },
+  },
+  {
+    accessorKey: "malice",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Malice" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <div className="flex space-x-2">
+          <span className="max-w-[300px] truncate text-xs text-muted-foreground">
+            {row.getValue("malice")}
+          </span>
+        </div>
+      )
+    },
+  },
+  {
+    accessorKey: "action",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Action" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <div className="flex space-x-2">
+          <span className="max-w-[300px] truncate text-xs text-muted-foreground">
+            {row.getValue("action")}
+          </span>
+        </div>
+      )
+    },
+  },
+  {
+    accessorKey: "context",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Context" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <div className="flex space-x-2">
+          <span className="max-w-[300px] truncate text-xs text-muted-foreground">
+            {row.getValue("context")}
+          </span>
+        </div>
+      )
+    },
+  },
+  {
+    accessorKey: "suppression",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Suppression" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <div className="flex space-x-2">
+          <span className="max-w-[300px] truncate text-xs text-muted-foreground">
+            {row.getValue("suppression")}
+          </span>
+        </div>
+      )
+    },
   },
 ]
diff --git a/frontend/src/components/cases/data-table-pagination.tsx b/frontend/src/components/cases/data-table-pagination.tsx
index e19091311..17202ccae 100644
--- a/frontend/src/components/cases/data-table-pagination.tsx
+++ b/frontend/src/components/cases/data-table-pagination.tsx
@@ -26,18 +26,18 @@ export function DataTablePagination<TData>({
     <div className="flex items-center justify-between px-2">
       <div className="flex-1 text-sm text-muted-foreground">
         {table.getFilteredSelectedRowModel().rows.length} of{" "}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
+        {table.getFilteredRowModel().rows.length} case(s) selected.
       </div>
       <div className="flex items-center space-x-6 lg:space-x-8">
         <div className="flex items-center space-x-2">
-          <p className="text-sm font-medium">Rows per page</p>
+          <p className="text-xs font-medium">Cases per page</p>
           <Select
             value={`${table.getState().pagination.pageSize}`}
             onValueChange={(value) => {
               table.setPageSize(Number(value))
             }}
           >
-            <SelectTrigger className="h-8 w-[70px]">
+            <SelectTrigger className="h-8 w-[70px] text-xs">
               <SelectValue placeholder={table.getState().pagination.pageSize} />
             </SelectTrigger>
             <SelectContent side="top">
@@ -49,7 +49,7 @@ export function DataTablePagination<TData>({
             </SelectContent>
           </Select>
         </div>
-        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+        <div className="flex w-[100px] items-center justify-center text-xs font-medium">
           Page {table.getState().pagination.pageIndex + 1} of{" "}
           {table.getPageCount()}
         </div>
@@ -61,7 +61,7 @@ export function DataTablePagination<TData>({
             disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to first page</span>
-            <DoubleArrowLeftIcon className="h-4 w-4" />
+            <DoubleArrowLeftIcon className="h-3 w-3" />
           </Button>
           <Button
             variant="outline"
@@ -70,7 +70,7 @@ export function DataTablePagination<TData>({
             disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to previous page</span>
-            <ChevronLeftIcon className="h-4 w-4" />
+            <ChevronLeftIcon className="h-3 w-3" />
           </Button>
           <Button
             variant="outline"
@@ -79,7 +79,7 @@ export function DataTablePagination<TData>({
             disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to next page</span>
-            <ChevronRightIcon className="h-4 w-4" />
+            <ChevronRightIcon className="h-3 w-3" />
           </Button>
           <Button
             variant="outline"
@@ -88,7 +88,7 @@ export function DataTablePagination<TData>({
             disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to last page</span>
-            <DoubleArrowRightIcon className="h-4 w-4" />
+            <DoubleArrowRightIcon className="h-3 w-3" />
           </Button>
         </div>
       </div>
diff --git a/frontend/src/components/cases/data-table-row-actions.tsx b/frontend/src/components/cases/data-table-row-actions.tsx
index 25fa1dcae..16eac5e79 100644
--- a/frontend/src/components/cases/data-table-row-actions.tsx
+++ b/frontend/src/components/cases/data-table-row-actions.tsx
@@ -19,7 +19,7 @@ import {
 } from "@/components/ui/dropdown-menu"
 
 import { labels } from "./data/data"
-import { taskSchema } from "./data/schema"
+import { caseSchema } from "./data/schema"
 
 interface DataTableRowActionsProps<TData> {
   row: Row<TData>
@@ -28,7 +28,7 @@ interface DataTableRowActionsProps<TData> {
 export function DataTableRowActions<TData>({
   row,
 }: DataTableRowActionsProps<TData>) {
-  const task = taskSchema.parse(row.original)
+  const task = caseSchema.parse(row.original)
 
   return (
     <DropdownMenu>
diff --git a/frontend/src/components/cases/data-table-toolbar.tsx b/frontend/src/components/cases/data-table-toolbar.tsx
index 880ea7b34..2da7a3da6 100644
--- a/frontend/src/components/cases/data-table-toolbar.tsx
+++ b/frontend/src/components/cases/data-table-toolbar.tsx
@@ -5,6 +5,13 @@ import { Table } from "@tanstack/react-table"
 
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
 import { DataTableViewOptions } from "@/components/cases/data-table-view-options"
 
 import { DataTableFacetedFilter } from "./data-table-faceted-filter"
@@ -23,7 +30,7 @@ export function DataTableToolbar<TData>({
     <div className="flex items-center justify-between">
       <div className="flex flex-1 items-center space-x-2">
         <Input
-          placeholder="Filter tasks..."
+          placeholder="Filter cases..."
           value={(table.getColumn("title")?.getFilterValue() as string) ?? ""}
           onChange={(event) =>
             table.getColumn("title")?.setFilterValue(event.target.value)
diff --git a/frontend/src/components/cases/data-table-view-options.tsx b/frontend/src/components/cases/data-table-view-options.tsx
index 990de9ddb..e37b70e8f 100644
--- a/frontend/src/components/cases/data-table-view-options.tsx
+++ b/frontend/src/components/cases/data-table-view-options.tsx
@@ -29,7 +29,7 @@ export function DataTableViewOptions<TData>({
           className="ml-auto hidden h-8 lg:flex"
         >
           <MixerHorizontalIcon className="mr-2 h-4 w-4" />
-          View
+          Toggle columns
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-[150px]">
diff --git a/frontend/src/components/cases/data/data.tsx b/frontend/src/components/cases/data/data.tsx
index a507982f6..7a1304708 100644
--- a/frontend/src/components/cases/data/data.tsx
+++ b/frontend/src/components/cases/data/data.tsx
@@ -1,54 +1,40 @@
 import {
+  AlertTriangleIcon,
   ArrowDownIcon,
   ArrowRightIcon,
   ArrowUpIcon,
-  CheckCircledIcon,
+  CheckCircleIcon,
   CircleIcon,
-  CrossCircledIcon,
-  QuestionMarkCircledIcon,
-  StopwatchIcon,
-} from "@radix-ui/react-icons"
-
-export const labels = [
-  {
-    value: "bug",
-    label: "Bug",
-  },
-  {
-    value: "feature",
-    label: "Feature",
-  },
-  {
-    value: "documentation",
-    label: "Documentation",
-  },
-]
+  FlagTriangleRightIcon,
+  ShieldAlertIcon,
+  TrafficConeIcon,
+} from "lucide-react"
 
 export const statuses = [
   {
-    value: "backlog",
-    label: "Backlog",
-    icon: QuestionMarkCircledIcon,
+    value: "open",
+    label: "Open",
+    icon: CircleIcon,
   },
   {
-    value: "todo",
-    label: "Todo",
-    icon: CircleIcon,
+    value: "closed",
+    label: "Closed",
+    icon: CheckCircleIcon,
   },
   {
     value: "in progress",
     label: "In Progress",
-    icon: StopwatchIcon,
+    icon: TrafficConeIcon,
   },
   {
-    value: "done",
-    label: "Done",
-    icon: CheckCircledIcon,
+    value: "reported",
+    label: "Reported",
+    icon: FlagTriangleRightIcon,
   },
   {
-    value: "canceled",
-    label: "Canceled",
-    icon: CrossCircledIcon,
+    value: "escalated",
+    label: "Escalated",
+    icon: ShieldAlertIcon,
   },
 ]
 
@@ -68,4 +54,9 @@ export const priorities = [
     value: "high",
     icon: ArrowUpIcon,
   },
+  {
+    label: "Critical",
+    value: "critical",
+    icon: AlertTriangleIcon,
+  },
 ]
diff --git a/frontend/src/components/cases/data/schema.ts b/frontend/src/components/cases/data/schema.ts
index 72000c0ec..fdf0794e4 100644
--- a/frontend/src/components/cases/data/schema.ts
+++ b/frontend/src/components/cases/data/schema.ts
@@ -1,13 +1,16 @@
 import { z } from "zod"
 
-// We're keeping a simple non-relational schema here.
-// IRL, you will have a schema for your data models.
-export const taskSchema = z.object({
-  id: z.string(),
+
+export const caseSchema = z.object({
+  id: z.number().int(),
   title: z.string(),
+  payload:z.record(z.string()).transform((val) => JSON.stringify(val)),
+  malice: z.enum(["malicious", "benign"]),
+  action: z.array(z.string()).transform((val) => val[0]),
+  context: z.array(z.string()),
+  suppression: z.record(z.boolean()).transform((val) => JSON.stringify(val)),
   status: z.string(),
-  label: z.string(),
-  priority: z.string(),
+  priority: z.enum(["low", "medium", "high", "critical"]),
 })
 
-export type Task = z.infer<typeof taskSchema>
+export type Task = z.infer<typeof caseSchema>
diff --git a/frontend/src/components/cases/data/seed.ts b/frontend/src/components/cases/data/seed.ts
deleted file mode 100755
index f77630856..000000000
--- a/frontend/src/components/cases/data/seed.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import fs from "fs"
-import path from "path"
-import { faker } from "@faker-js/faker"
-
-import { labels, priorities, statuses } from "./data"
-
-const tasks = Array.from({ length: 100 }, () => ({
-  id: `TASK-${faker.number.int({ min: 1000, max: 9999 })}`,
-  title: faker.hacker.phrase().replace(/^./, (letter) => letter.toUpperCase()),
-  status: faker.helpers.arrayElement(statuses).value,
-  label: faker.helpers.arrayElement(labels).value,
-  priority: faker.helpers.arrayElement(priorities).value,
-}))
-
-fs.writeFileSync(
-  path.join(__dirname, "tasks.json"),
-  JSON.stringify(tasks, null, 2)
-)
-
-console.log("✅ Tasks data generated.")
diff --git a/frontend/src/components/cases/data/tasks.json b/frontend/src/components/cases/data/tasks.json
index 2d10a4a0b..fb4c734e8 100644
--- a/frontend/src/components/cases/data/tasks.json
+++ b/frontend/src/components/cases/data/tasks.json
@@ -1,702 +1,167 @@
 [
   {
-    "id": "TASK-8782",
-    "title": "You can't compress the program without quantifying the open-source SSD pixel!",
-    "status": "in progress",
-    "label": "documentation",
+    "id": 1,
+    "title": "Pizza Order: Double Anchovy and Chocolate Chips",
+    "payload": {"pizza_order": "Double Anchovy and Chocolate Chips"},
+    "malice": "malicious",
+    "action": ["Immediately redirect them to a dessert menu. Offer a classic Margherita as palate cleanser."],
+    "context": ["seafood", "sweet"],
+    "suppression": {"Is between 12 to 14 inches": true, "Is pizza": true, "Order describes only one pizza": true},
+    "status": "escalated",
     "priority": "medium"
   },
   {
-    "id": "TASK-7878",
-    "title": "Try to calculate the EXE feed, maybe it will index the multi-byte pixel!",
-    "status": "backlog",
-    "label": "documentation",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-7839",
-    "title": "We need to bypass the neural TCP card!",
-    "status": "todo",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-5562",
-    "title": "The SAS interface is down, bypass the open-source pixel so we can back up the PNG bandwidth!",
-    "status": "backlog",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-8686",
-    "title": "I'll parse the wireless SSL protocol, that should driver the API panel!",
-    "status": "canceled",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-1280",
-    "title": "Use the digital TLS panel, then you can transmit the haptic system!",
-    "status": "done",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-7262",
-    "title": "The UTF8 application is down, parse the neural bandwidth so we can back up the PNG firewall!",
-    "status": "done",
-    "label": "feature",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-1138",
-    "title": "Generating the driver won't do anything, we need to quantify the 1080p SMTP bandwidth!",
-    "status": "in progress",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-7184",
-    "title": "We need to program the back-end THX pixel!",
-    "status": "todo",
-    "label": "feature",
+    "id": 2,
+    "title": "Pizza Order: Extra Cheese and Pineapple",
+    "payload": {"pizza_order": "Extra Cheese and Pineapple"},
+    "malice": "malicious",
+    "action": ["Reluctantly prepare with a reminder that Italy watches in disappointment. Offer a Napoletana next time."],
+    "context": ["controversial", "fruit"],
+    "suppression": {"Is between 12 to 14 inches": true, "Is pizza": true, "Order describes only one pizza": true},
+    "status": "closed",
     "priority": "low"
   },
   {
-    "id": "TASK-5160",
-    "title": "Calculating the bus won't do anything, we need to navigate the back-end JSON protocol!",
-    "status": "in progress",
-    "label": "documentation",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-5618",
-    "title": "Generating the driver won't do anything, we need to index the online SSL application!",
-    "status": "done",
-    "label": "documentation",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-6699",
-    "title": "I'll transmit the wireless JBOD capacitor, that should hard drive the SSD feed!",
-    "status": "backlog",
-    "label": "documentation",
-    "priority": "medium"
+    "id": 3,
+    "title": "Pizza Order: Classic Margherita with Buffalo Mozzarella",
+    "payload": {"pizza_order": "Classic Margherita with Buffalo Mozzarella"},
+    "malice": "benign",
+    "action": ["Praise the customer's exquisite taste. Include a free sample of our finest olive oil."],
+    "context": ["authentic", "vegetarian"],
+    "suppression": {"Is between 12 to 14 inches": true, "Is pizza": true, "Order describes only one pizza": true},
+    "status": "open",
+    "priority": "critical"
   },
   {
-    "id": "TASK-2858",
-    "title": "We need to override the online UDP bus!",
-    "status": "backlog",
-    "label": "bug",
+    "id": 4,
+    "title": "Pizza Order: Deep Dish Pepperoni and Mushroom",
+    "payload": {"pizza_order": "Deep Dish Pepperoni and Mushroom"},
+    "malice": "malicious",
+    "action": ["Suppress a sigh. Prepare with care but include a brochure on Italian pizza history."],
+    "context": ["deep dish", "meat"],
+    "suppression": {"Is between 12 to 14 inches": false, "Is pizza": true, "Order describes only one pizza": true},
+    "status": "reported",
     "priority": "medium"
   },
   {
-    "id": "TASK-9864",
-    "title": "I'll reboot the 1080p FTP panel, that should matrix the HEX hard drive!",
-    "status": "done",
-    "label": "bug",
+    "id": 5,
+    "title": "Pizza Order: Quattro Stagioni with Authentic Italian Ham",
+    "payload": {"pizza_order": "Quattro Stagioni with Authentic Italian Ham"},
+    "malice": "benign",
+    "action": ["Approve with enthusiasm. Offer a side of marinated artichokes as a compliment."],
+    "context": ["authentic", "variety"],
+    "suppression": {"Is between 12 to 14 inches": true, "Is pizza": true, "Order describes only one pizza": true},
+    "status": "closed",
     "priority": "high"
   },
   {
-    "id": "TASK-8404",
-    "title": "We need to generate the virtual HEX alarm!",
-    "status": "in progress",
-    "label": "bug",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-5365",
-    "title": "Backing up the pixel won't do anything, we need to transmit the primary IB array!",
-    "status": "in progress",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-1780",
-    "title": "The CSS feed is down, index the bluetooth transmitter so we can compress the CLI protocol!",
-    "status": "todo",
-    "label": "documentation",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-6938",
-    "title": "Use the redundant SCSI application, then you can hack the optical alarm!",
-    "status": "todo",
-    "label": "documentation",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-9885",
-    "title": "We need to compress the auxiliary VGA driver!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-3216",
-    "title": "Transmitting the transmitter won't do anything, we need to compress the virtual HDD sensor!",
-    "status": "backlog",
-    "label": "documentation",
+    "id": 6,
+    "title": "Pizza Order: Vegan Supreme with Cashew Cheese",
+    "payload": {"pizza_order": "Vegan Supreme with Cashew Cheese"},
+    "malice": "benign",
+    "action": ["Acknowledge their dietary preference with respect. Suggest adding a vegan pesto drizzle."],
+    "context": ["vegan", "vegetarian"],
+    "suppression": {"Is between 12 to 14 inches": true, "Is pizza": true, "Order describes only one pizza": true},
+    "status": "open",
     "priority": "medium"
   },
   {
-    "id": "TASK-9285",
-    "title": "The IP monitor is down, copy the haptic alarm so we can generate the HTTP transmitter!",
-    "status": "todo",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-1024",
-    "title": "Overriding the microchip won't do anything, we need to transmit the digital OCR transmitter!",
-    "status": "in progress",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-7068",
-    "title": "You can't generate the capacitor without indexing the wireless HEX pixel!",
-    "status": "canceled",
-    "label": "bug",
+    "id": 7,
+    "title": "Pizza Order: Spicy Hawaiian with Jalapeños and Pineapple",
+    "payload": {"pizza_order": "Spicy Hawaiian with Jalapeños and Pineapple"},
+    "malice": "malicious",
+    "action": ["Prepare under protest. Offer a side of antacids as a gesture of goodwill."],
+    "context": ["fruit", "spicy"],
+    "suppression": {"Is between 12 to 14 inches": true, "Is pizza": true, "Order describes only one pizza": true},
+    "status": "escalated",
     "priority": "low"
   },
   {
-    "id": "TASK-6502",
-    "title": "Navigating the microchip won't do anything, we need to bypass the back-end SQL bus!",
-    "status": "todo",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-5326",
-    "title": "We need to hack the redundant UTF8 transmitter!",
-    "status": "todo",
-    "label": "bug",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-6274",
-    "title": "Use the virtual PCI circuit, then you can parse the bluetooth alarm!",
-    "status": "canceled",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-1571",
-    "title": "I'll input the neural DRAM circuit, that should protocol the SMTP interface!",
-    "status": "in progress",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-9518",
-    "title": "Compressing the interface won't do anything, we need to compress the online SDD matrix!",
-    "status": "canceled",
-    "label": "documentation",
+    "id": 8,
+    "title": "Pizza Order: Pepperoni Smiley Face Design",
+    "payload": {"pizza_order": "Pepperoni Smiley Face Design"},
+    "malice": "benign",
+    "action": ["Admire their joy. Comply with a smile; consider featuring it on our social media."],
+    "context": ["meat", "fun"],
+    "suppression": {"Is between 12 to 14 inches": true, "Is pizza": true, "Order describes only one pizza": true},
+    "status": "closed",
     "priority": "medium"
   },
   {
-    "id": "TASK-5581",
-    "title": "I'll synthesize the digital COM pixel, that should transmitter the UTF8 protocol!",
-    "status": "backlog",
-    "label": "documentation",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-2197",
-    "title": "Parsing the feed won't do anything, we need to copy the bluetooth DRAM bus!",
-    "status": "todo",
-    "label": "documentation",
-    "priority": "low"
+    "id": 9,
+    "title": "Pizza Order: Sausage and Broccoli Rabe on Thin Crust",
+    "payload": {"pizza_order": "Sausage and Broccoli Rabe on Thin Crust"},
+    "malice": "benign",
+    "action": ["Celebrate their choice of greens. Offer a complimentary dipping sauce to enhance flavors."],
+    "context": ["meat", "vegetables"],
+    "suppression": {"Is between 12 to 14 inches": true, "Is pizza": true, "Order describes only one pizza": true},
+    "status": "open",
+    "priority": "critical"
   },
   {
-    "id": "TASK-8484",
-    "title": "We need to parse the solid state UDP firewall!",
-    "status": "in progress",
-    "label": "bug",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-9892",
-    "title": "If we back up the application, we can get to the UDP application through the multi-byte THX capacitor!",
-    "status": "done",
-    "label": "documentation",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-9616",
-    "title": "We need to synthesize the cross-platform ASCII pixel!",
-    "status": "in progress",
-    "label": "feature",
+    "id": 10,
+    "title": "Pizza Order: Triple Garlic with Anchovy Paste",
+    "payload": {"pizza_order": "Triple Garlic with Anchovy Paste"},
+    "malice": "malicious",
+    "action": ["Question their love for vampires. Provide a side of parsley to freshen breath."],
+    "context": ["seafood", "garlic-heavy"],
+    "suppression": {"Is between 12 to 14 inches": true, "Is pizza": true, "Order describes only one pizza": true},
+    "status": "reported",
     "priority": "medium"
   },
   {
-    "id": "TASK-9744",
-    "title": "Use the back-end IP card, then you can input the solid state hard drive!",
-    "status": "done",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-1376",
-    "title": "Generating the alarm won't do anything, we need to generate the mobile IP capacitor!",
-    "status": "backlog",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-7382",
-    "title": "If we back up the firewall, we can get to the RAM alarm through the primary UTF8 pixel!",
-    "status": "todo",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-2290",
-    "title": "I'll compress the virtual JSON panel, that should application the UTF8 bus!",
-    "status": "canceled",
-    "label": "documentation",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-1533",
-    "title": "You can't input the firewall without overriding the wireless TCP firewall!",
-    "status": "done",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-4920",
-    "title": "Bypassing the hard drive won't do anything, we need to input the bluetooth JSON program!",
-    "status": "in progress",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-5168",
-    "title": "If we synthesize the bus, we can get to the IP panel through the virtual TLS array!",
-    "status": "in progress",
-    "label": "feature",
+    "id": 11,
+    "title": "Pizza Order: Buffalo Chicken with Blue Cheese Drizzle",
+    "payload": {"pizza_order": "Buffalo Chicken with Blue Cheese Drizzle"},
+    "malice": "malicious",
+    "action": ["Suggest a wing night instead. Reluctantly prepare, insisting on Italian seasoning."],
+    "context": ["meat", "spicy"],
+    "suppression": {"Is between 12 to 14 inches": true, "Is pizza": true, "Order describes only one pizza": true},
+    "status": "escalated",
     "priority": "low"
   },
   {
-    "id": "TASK-7103",
-    "title": "We need to parse the multi-byte EXE bandwidth!",
-    "status": "canceled",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-4314",
-    "title": "If we compress the program, we can get to the XML alarm through the multi-byte COM matrix!",
-    "status": "in progress",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-3415",
-    "title": "Use the cross-platform XML application, then you can quantify the solid state feed!",
-    "status": "todo",
-    "label": "feature",
+    "id": 12,
+    "title": "Pizza Order: Prosciutto and Arugula with Balsamic Glaze",
+    "payload": {"pizza_order": "Prosciutto and Arugula with Balsamic Glaze"},
+    "malice": "benign",
+    "action": ["Commend their gourmet choice. Offer a complimentary glass of Chianti for dine-in."],
+    "context": ["authentic", "gourmet"],
+    "suppression": {"Is between 12 to 14 inches": true, "Is pizza": true, "Order describes only one pizza": true},
+    "status": "open",
     "priority": "high"
   },
   {
-    "id": "TASK-8339",
-    "title": "Try to calculate the DNS interface, maybe it will input the bluetooth capacitor!",
-    "status": "in progress",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-6995",
-    "title": "Try to hack the XSS bandwidth, maybe it will override the bluetooth matrix!",
-    "status": "todo",
-    "label": "feature",
+    "id": 13,
+    "title": "Pizza Order: Capricciosa with Artichokes and Ham",
+    "payload": {"pizza_order": "Capricciosa with Artichokes and Ham"},
+    "malice": "benign",
+    "action": ["Applaud their classic choice. Offer a side of homemade focaccia."],
+    "context": ["authentic", "vegetables"],
+    "suppression": {"Is between 12 to 14 inches": true, "Is pizza": true, "Order describes only one pizza": true},
+    "status": "closed",
     "priority": "high"
   },
   {
-    "id": "TASK-8053",
-    "title": "If we connect the program, we can get to the UTF8 matrix through the digital UDP protocol!",
-    "status": "todo",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-4336",
-    "title": "If we synthesize the microchip, we can get to the SAS sensor through the optical UDP program!",
-    "status": "todo",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-8790",
-    "title": "I'll back up the optical COM alarm, that should alarm the RSS capacitor!",
-    "status": "done",
-    "label": "bug",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-8980",
-    "title": "Try to navigate the SQL transmitter, maybe it will back up the virtual firewall!",
-    "status": "canceled",
-    "label": "bug",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-7342",
-    "title": "Use the neural CLI card, then you can parse the online port!",
-    "status": "backlog",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-5608",
-    "title": "I'll hack the haptic SSL program, that should bus the UDP transmitter!",
-    "status": "canceled",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-1606",
-    "title": "I'll generate the bluetooth PNG firewall, that should pixel the SSL driver!",
-    "status": "done",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-7872",
-    "title": "Transmitting the circuit won't do anything, we need to reboot the 1080p RSS monitor!",
-    "status": "canceled",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-4167",
-    "title": "Use the cross-platform SMS circuit, then you can synthesize the optical feed!",
-    "status": "canceled",
-    "label": "bug",
+    "id": 14,
+    "title": "Pizza Order: Gluten-Free Crust with Vegan Cheese",
+    "payload": {"pizza_order": "Gluten-Free Crust with Vegan Cheese"},
+    "malice": "benign",
+    "action": ["Support their health-conscious choice. Offer a complimentary vegan appetizer."],
+    "context": ["vegan", "gluten-free"],
+    "suppression": {"Is between 12 to 14 inches": true, "Is pizza": true, "Order describes only one pizza": true},
+    "status": "open",
     "priority": "medium"
   },
   {
-    "id": "TASK-9581",
-    "title": "You can't index the port without hacking the cross-platform XSS monitor!",
-    "status": "backlog",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-8806",
-    "title": "We need to bypass the back-end SSL panel!",
-    "status": "done",
-    "label": "bug",
+    "id": 15,
+    "title": "Pizza Order: Four Cheese with Honey Drizzle",
+    "payload": {"pizza_order": "Four Cheese with Honey Drizzle"},
+    "malice": "malicious",
+    "action": ["Ponder their adventurous palate. Serve with a cautionary note on sweetness overload."],
+    "context": ["cheese-lover", "sweet"],
+    "suppression": {"Is between 12 to 14 inches": true, "Is pizza": true, "Order describes only one pizza": true},
+    "status": "open",
     "priority": "medium"
-  },
-  {
-    "id": "TASK-6542",
-    "title": "Try to quantify the RSS firewall, maybe it will quantify the open-source system!",
-    "status": "done",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-6806",
-    "title": "The VGA protocol is down, reboot the back-end matrix so we can parse the CSS panel!",
-    "status": "canceled",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-9549",
-    "title": "You can't bypass the bus without connecting the neural JBOD bus!",
-    "status": "todo",
-    "label": "feature",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-1075",
-    "title": "Backing up the driver won't do anything, we need to parse the redundant RAM pixel!",
-    "status": "done",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-1427",
-    "title": "Use the auxiliary PCI circuit, then you can calculate the cross-platform interface!",
-    "status": "done",
-    "label": "documentation",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-1907",
-    "title": "Hacking the circuit won't do anything, we need to back up the online DRAM system!",
-    "status": "todo",
-    "label": "documentation",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-4309",
-    "title": "If we generate the system, we can get to the TCP sensor through the optical GB pixel!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-3973",
-    "title": "I'll parse the back-end ADP array, that should bandwidth the RSS bandwidth!",
-    "status": "todo",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-7962",
-    "title": "Use the wireless RAM program, then you can hack the cross-platform feed!",
-    "status": "canceled",
-    "label": "bug",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-3360",
-    "title": "You can't quantify the program without synthesizing the neural OCR interface!",
-    "status": "done",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-9887",
-    "title": "Use the auxiliary ASCII sensor, then you can connect the solid state port!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-3649",
-    "title": "I'll input the virtual USB system, that should circuit the DNS monitor!",
-    "status": "in progress",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-3586",
-    "title": "If we quantify the circuit, we can get to the CLI feed through the mobile SMS hard drive!",
-    "status": "in progress",
-    "label": "bug",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-5150",
-    "title": "I'll hack the wireless XSS port, that should transmitter the IP interface!",
-    "status": "canceled",
-    "label": "feature",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-3652",
-    "title": "The SQL interface is down, override the optical bus so we can program the ASCII interface!",
-    "status": "backlog",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-6884",
-    "title": "Use the digital PCI circuit, then you can synthesize the multi-byte microchip!",
-    "status": "canceled",
-    "label": "feature",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-1591",
-    "title": "We need to connect the mobile XSS driver!",
-    "status": "in progress",
-    "label": "feature",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-3802",
-    "title": "Try to override the ASCII protocol, maybe it will parse the virtual matrix!",
-    "status": "in progress",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-7253",
-    "title": "Programming the capacitor won't do anything, we need to bypass the neural IB hard drive!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-9739",
-    "title": "We need to hack the multi-byte HDD bus!",
-    "status": "done",
-    "label": "documentation",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-4424",
-    "title": "Try to hack the HEX alarm, maybe it will connect the optical pixel!",
-    "status": "in progress",
-    "label": "documentation",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-3922",
-    "title": "You can't back up the capacitor without generating the wireless PCI program!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-4921",
-    "title": "I'll index the open-source IP feed, that should system the GB application!",
-    "status": "canceled",
-    "label": "bug",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-5814",
-    "title": "We need to calculate the 1080p AGP feed!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-2645",
-    "title": "Synthesizing the system won't do anything, we need to navigate the multi-byte HDD firewall!",
-    "status": "todo",
-    "label": "documentation",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-4535",
-    "title": "Try to copy the JSON circuit, maybe it will connect the wireless feed!",
-    "status": "in progress",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-4463",
-    "title": "We need to copy the solid state AGP monitor!",
-    "status": "done",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-9745",
-    "title": "If we connect the protocol, we can get to the GB system through the bluetooth PCI microchip!",
-    "status": "canceled",
-    "label": "feature",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-2080",
-    "title": "If we input the bus, we can get to the RAM matrix through the auxiliary RAM card!",
-    "status": "todo",
-    "label": "bug",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-3838",
-    "title": "I'll bypass the online TCP application, that should panel the AGP system!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-1340",
-    "title": "We need to navigate the virtual PNG circuit!",
-    "status": "todo",
-    "label": "bug",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-6665",
-    "title": "If we parse the monitor, we can get to the SSD hard drive through the cross-platform AGP alarm!",
-    "status": "canceled",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-7585",
-    "title": "If we calculate the hard drive, we can get to the SSL program through the multi-byte CSS microchip!",
-    "status": "backlog",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-6319",
-    "title": "We need to copy the multi-byte SCSI program!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-4369",
-    "title": "Try to input the SCSI bus, maybe it will generate the 1080p pixel!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-9035",
-    "title": "We need to override the solid state PNG array!",
-    "status": "canceled",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-3970",
-    "title": "You can't index the transmitter without quantifying the haptic ASCII card!",
-    "status": "todo",
-    "label": "documentation",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-4473",
-    "title": "You can't bypass the protocol without overriding the neural RSS program!",
-    "status": "todo",
-    "label": "documentation",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-4136",
-    "title": "You can't hack the hard drive without hacking the primary JSON program!",
-    "status": "canceled",
-    "label": "bug",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-3939",
-    "title": "Use the back-end SQL firewall, then you can connect the neural hard drive!",
-    "status": "done",
-    "label": "feature",
-    "priority": "low"
-  },
-  {
-    "id": "TASK-2007",
-    "title": "I'll input the back-end USB protocol, that should bandwidth the PCI system!",
-    "status": "backlog",
-    "label": "bug",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-7516",
-    "title": "Use the primary SQL program, then you can generate the auxiliary transmitter!",
-    "status": "done",
-    "label": "documentation",
-    "priority": "medium"
-  },
-  {
-    "id": "TASK-6906",
-    "title": "Try to back up the DRAM system, maybe it will reboot the online transmitter!",
-    "status": "done",
-    "label": "feature",
-    "priority": "high"
-  },
-  {
-    "id": "TASK-5207",
-    "title": "The SMS interface is down, copy the bluetooth bus so we can quantify the VGA card!",
-    "status": "in progress",
-    "label": "bug",
-    "priority": "low"
   }
 ]
diff --git a/frontend/src/components/ui/drawer.tsx b/frontend/src/components/ui/drawer.tsx
new file mode 100644
index 000000000..6a0ef53dd
--- /dev/null
+++ b/frontend/src/components/ui/drawer.tsx
@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}