diff --git a/.env b/.env
new file mode 100644
index 0000000..979796c
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=https://newgarage.yslootahtech.com
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index e6ce5a4..8655a4c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,9 @@
 
 # testing
 /coverage
+/cypress/videos
+/cypress/screenshots
+/cypress/downloads
 
 # next.js
 /.next/
diff --git a/.vscode/mcp.json b/.vscode/mcp.json
new file mode 100644
index 0000000..6716ff9
--- /dev/null
+++ b/.vscode/mcp.json
@@ -0,0 +1,11 @@
+{
+  "servers": {
+    "shadcn": {
+      "command": "npx",
+      "args": [
+        "shadcn@latest",
+        "mcp"
+      ]
+    }
+  }
+}
diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
new file mode 100644
index 0000000..1817e2f
--- /dev/null
+++ b/app/(auth)/login/page.tsx
@@ -0,0 +1,12 @@
+import { LoginForm } from "@/modules/auth/login-form";
+
+ 
+export default function Page() {
+  return (
+    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+      <div className="w-full max-w-sm">
+        <LoginForm />
+      </div>
+    </div>
+  )
+}
diff --git a/app/(authenticated)/layout.tsx b/app/(authenticated)/layout.tsx
new file mode 100644
index 0000000..e19769f
--- /dev/null
+++ b/app/(authenticated)/layout.tsx
@@ -0,0 +1,218 @@
+"use client"
+
+import type { NavGroup } from "@/base/types/navigation"
+import {
+  AlarmClockIcon,
+  AwardIcon,
+  BanknoteArrowDownIcon,
+  BarChart3Icon,
+  BellRingIcon,
+  BookIcon,
+  BriefcaseBusinessIcon,
+  Building2Icon,
+  CalendarCheck2Icon,
+  CalendarDaysIcon,
+  LayoutDashboardIcon,
+  ClipboardListIcon,
+  UsersIcon,
+  CalendarIcon,
+  CarIcon,
+  ClipboardCheckIcon,
+  Clock3Icon,
+  ClockIcon,
+  GemIcon,
+  GitBranchIcon,
+  HandCoinsIcon,
+  ListIcon,
+  ListTodoIcon,
+  MegaphoneIcon,
+  PackageIcon,
+  PhoneCallIcon,
+  PlugZapIcon,
+  ReceiptIcon,
+  ReceiptTextIcon,
+  SettingsIcon,
+  ShoppingBasketIcon,
+  CircleDollarSign,
+  StarIcon,
+  StoreIcon,
+  TimerIcon,
+  UserCogIcon,
+  WalletIcon,
+  WrenchIcon,
+  ShoppingCartIcon,
+} from "lucide-react"
+import Image from "next/image"
+import { DashboardLayout } from "@/base/components/layout/dashboard"
+import { useAuth } from "@/shared/hooks/use-auth"
+
+const navGroups: NavGroup[] = [
+  {
+    items: [
+      {
+        title: "Dashboard",
+        href: "/",
+        icon: <LayoutDashboardIcon />,
+      },
+      {
+        title: "Job Cards",
+        href: "/sales/workorder/list",
+        icon: <ClipboardListIcon />,
+      },
+      {
+        title: "Customer & Vehicles",
+        href: "/customer_vehicles",
+        icon: <UsersIcon />,
+      },
+      {
+        title: "Reports",
+        href: "/reports",
+        icon: <BarChart3Icon />,
+      },
+    ],
+  },
+  {
+    label: "Management",
+    items: [
+      {
+        title: "Calendars",
+        href: "/calendars",
+        icon: <CalendarIcon />,
+        items: [
+          { title: "Work Schedule", href: "/calendar/work_schedule/list", icon: <Clock3Icon /> },
+          { title: "Appointments", href: "/calendar/appointment/list", icon: <CalendarCheck2Icon /> },
+        ],
+      },
+      {
+        title: "Sales",
+        href: "/sales",
+        icon: <CircleDollarSign />,
+        items: [
+          { title: "Customers", href: "/sales/customers", icon: <UsersIcon /> },
+          { title: "Vehicles", href: "/sales/vehicles", icon: <CarIcon /> },
+          { title: "Inspections", href: "/sales/inspections", icon: <ClipboardCheckIcon /> },
+          { title: "Estimates", href: "/sales/estimate", icon: <ReceiptTextIcon /> },
+          { title: "Job Cards", href: "/sales/workorder/list", icon: <ClipboardListIcon /> },
+          { title: "Invoices", href: "/sales/invoice", icon: <ReceiptIcon /> },
+          { title: "Payments Received", href: "/sales/payment_received", icon: <HandCoinsIcon /> },
+          { title: "Credit Notes", href: "/sales/credit_notes", icon: <ReceiptTextIcon /> },
+        ],
+      },
+      {
+        title: "Purchases",
+        href: "/purchases",
+        icon: <ShoppingCartIcon />,
+        items: [
+          { title: "Vendors", href: "/purchase/vendor", icon: <StoreIcon /> },
+          { title: "Expenses", href: "/purchase/expense", icon: <WalletIcon /> },
+          { title: "Purchase Orders", href: "/purchase/purchase_order", icon: <ShoppingBasketIcon /> },
+          { title: "Bills", href: "/purchase/bill", icon: <ReceiptIcon /> },
+          { title: "Payments Made", href: "/purchase/payments_made", icon: <BanknoteArrowDownIcon /> },
+          { title: "Vendor Credits", href: "/purchase/vendor_credit", icon: <ReceiptTextIcon /> },
+        ],
+      },
+      {
+        title: "CRM",
+        href: "/crm",
+        icon: <BriefcaseBusinessIcon />,
+        items: [
+          { title: "Leads", href: "/crm/leads/list", icon: <GemIcon /> },
+          { title: "Calls", href: "/crm/calls_follow_up/list", icon: <PhoneCallIcon /> },
+          { title: "Tasks", href: "/crm/tasks/list", icon: <ListTodoIcon /> },
+        ],
+      },
+      {
+        title: "Marketing",
+        href: "/marketing",
+        icon: <MegaphoneIcon />,
+        items: [
+          { title: "Service Reminders", href: "/marketing/service_reminder/list", icon: <AlarmClockIcon /> },
+          { title: "Rating & Reviews", href: "/marketing/rating_review", icon: <StarIcon /> },
+          { title: "Google Business Reviews", href: "/marketing/google_rating_review", icon: <AwardIcon /> },
+        ],
+      },
+      {
+        title: "Accountants",
+        href: "/accountants",
+        icon: <BookIcon />,
+        items: [
+          { title: "Manual Journals", href: "/accountants/manual_journal", icon: <BookIcon /> },
+          { title: "Chart of Accounts", href: "/accountants/chart_of_account", icon: <GitBranchIcon /> },
+        ],
+      },
+      {
+        title: "Employees",
+        href: "/productivity",
+        icon: <UserCogIcon />,
+        items: [
+          { title: "Employees", href: "/productivity/employees", icon: <UsersIcon /> },
+          { title: "Time Clocks", href: "/productivity/time_clocks", icon: <TimerIcon /> },
+          { title: "Time Sheets", href: "/productivity/timesheet", icon: <ClockIcon /> },
+          { title: "Payroll", href: "/productivity/payroll", icon: <WalletIcon /> },
+          { title: "Payments Made", href: "/productivity/employee_payments_made", icon: <HandCoinsIcon /> },
+          { title: "Shop Calendars", href: "/productivity/shop_calendars", icon: <CalendarDaysIcon /> },
+          { title: "Shop Timing", href: "/productivity/shop_timings", icon: <Clock3Icon /> },
+          { title: "Holidays", href: "/productivity/holidays", icon: <CalendarIcon /> },
+        ],
+      },
+      {
+        title: "Items",
+        href: "/items",
+        icon: <PackageIcon />,
+        items: [
+          { title: "Services", href: "/items/services", icon: <WrenchIcon /> },
+          { title: "Parts", href: "/items/parts", icon: <WrenchIcon /> },
+          { title: "Expense Item", href: "/items/expense_item", icon: <WalletIcon /> },
+          { title: "Service Group", href: "/items/service_group", icon: <PackageIcon /> },
+          { title: "Inspections", href: "/items/inspection", icon: <ClipboardCheckIcon /> },
+          { title: "Inventory Adjustments", href: "/items/adjustment", icon: <ListIcon /> },
+        ],
+      },
+      {
+        title: "Settings",
+        href: "/setting",
+        icon: <SettingsIcon />,
+        items: [
+          { title: "Company", href: "/setting/company", icon: <Building2Icon /> },
+          { title: "Shop Types", href: "/setting/shop_type", icon: <CarIcon /> },
+          { title: "Tax & Rates", href: "/setting/tax_rates", icon: <ReceiptTextIcon /> },
+          { title: "Configurations", href: "/setting/configurations/preferences/sales", icon: <SettingsIcon /> },
+          { title: "Templates", href: "/setting/templates", icon: <ClipboardListIcon /> },
+          { title: "Integrations", href: "/setting/integrations/providers", icon: <PlugZapIcon /> },
+          { title: "Master", href: "/setting/master/body_type", icon: <ListIcon /> },
+        ],
+      },
+    ],
+  },
+]
+
+function Logo() {
+  return (
+    <div className="flex items-center gap-2">
+        <Image alt="Logo" src={'/assets/logo.png'} height={200} width={200}/>
+    </div>
+  )
+}
+
+export default function AuthenticatedLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const { user } = useAuth()
+
+  const userInfo = user
+    ? {
+        name: user.name,
+        email: user.email,
+        initials: user.name.charAt(0).toUpperCase(),
+      }
+    : undefined
+
+  return (
+    <DashboardLayout navGroups={navGroups} logo={<Logo />} user={userInfo}>
+      {children}
+    </DashboardLayout>
+  )
+}
+
diff --git a/app/(authenticated)/page.tsx b/app/(authenticated)/page.tsx
new file mode 100644
index 0000000..69396b0
--- /dev/null
+++ b/app/(authenticated)/page.tsx
@@ -0,0 +1,14 @@
+import { DashboardHeader } from "@/base/components/layout/dashboard";
+import DashboardPage from "@/base/components/layout/dashboard/dashboard-page";
+export default function page() {
+  return (
+    <DashboardPage header={<DashboardHeader />} >
+      <div className="space-y-6">
+        <h1 className="text-2xl font-bold tracking-tight">Dashboard</h1>
+        <p className="text-muted-foreground">
+          Welcome to your dashboard. Select an item from the sidebar to get started.
+        </p>
+      </div>
+    </DashboardPage>
+  )
+}
diff --git a/app/(authenticated)/sales/customers/page.tsx b/app/(authenticated)/sales/customers/page.tsx
new file mode 100644
index 0000000..637fdd5
--- /dev/null
+++ b/app/(authenticated)/sales/customers/page.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import { ResourcePage } from '@/shared/data-view/resource-page'
+import { ColumnHeader } from '@/shared/data-view/table-view'
+import { CustomerForm } from '@/modules/customers/customer-form'
+import { CUSTOMER_ROUTES } from '@repo/api'
+import type { CustomersClient } from '@repo/api'
+import { Building2Icon,   UserIcon } from 'lucide-react'
+
+export default function CustomersPage() {
+    return (
+        <ResourcePage<CustomersClient>
+            pageTitle='Customers'
+            title="Customer"
+            routeKey={CUSTOMER_ROUTES.INDEX}
+            getClient={(api) => api.customers}
+            columns={({ actionsColumn }) => [
+
+                {
+                    accessorKey: "first_name",
+                    header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
+                    cell: ({ row }) => {
+                        const customerName = row.original.first_name
+                        const isCompany = row.original.customer_type?.name?.toLocaleLowerCase() === "company";
+                        const companyName = row.original.company_name 
+                        const name = isCompany && companyName ? `${customerName} (${row.original.last_name})` : customerName
+                    
+                    return (<div className="flex items-center gap-2">
+                            {isCompany ? <Building2Icon className="text-muted-foreground" /> : <UserIcon className="text-muted-foreground" />}
+                            <span>{name}</span>
+                        </div>
+                        )
+                    },
+                },
+                {
+                    accessorKey: "email",
+                    header: ({ column }) => <ColumnHeader column={column} title="Email" />,
+                },
+                {
+                    accessorKey: "phone",
+                    header: ({ column }) => <ColumnHeader column={column} title="Phone" />,
+                },
+                actionsColumn(),
+            ]}
+            renderForm={({ resourceId, initialData, onSuccess }) => (
+                <CustomerForm
+                    resourceId={resourceId}
+                    initialData={initialData}
+                    onSuccess={onSuccess}
+                />
+            )}
+        />
+    )
+}
\ No newline at end of file
diff --git a/app/(authenticated)/sales/vehicles/page.tsx b/app/(authenticated)/sales/vehicles/page.tsx
new file mode 100644
index 0000000..e7e16d8
--- /dev/null
+++ b/app/(authenticated)/sales/vehicles/page.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import { ResourcePage } from '@/shared/data-view/resource-page'
+import { ColumnHeader } from '@/shared/data-view/table-view'
+import { VehicleForm } from '@/modules/vehicles/vehicle-form'
+import { VEHICLE_ROUTES } from '@repo/api'
+import type { VehiclesClient } from '@repo/api'
+import { CarIcon } from 'lucide-react'
+
+export default function VehiclesPage() {
+    return (
+        <ResourcePage<VehiclesClient>
+            pageTitle="Vehicles"
+            title="Vehicle"
+            routeKey={VEHICLE_ROUTES.INDEX}
+            getClient={(api) => api.vehicles}
+            columns={({ actionsColumn }) => [
+                {
+                    accessorKey: "name",
+                    header: ({ column }) => <ColumnHeader column={column} title="Vehicle" />,
+                    cell: ({ row }) => {
+                        const r = row.original as any
+                        const display = r.name || `${r.make ?? ""} ${r.model ?? ""}`.trim() || "—"
+                        return (
+                            <div className="flex items-center gap-2">
+                                <CarIcon className="h-4 w-4 text-muted-foreground" />
+                                <span>{display}</span>
+                            </div>
+                        )
+                    },
+                },
+                {
+                    accessorKey: "year",
+                    header: ({ column }) => <ColumnHeader column={column} title="Year" />,
+                    cell: ({ row }) => (row.original as any).year ?? "—",
+                },
+                {
+                    accessorKey: "license_plate",
+                    header: ({ column }) => <ColumnHeader column={column} title="License Plate" />,
+                    cell: ({ row }) => (row.original as any).license_plate ?? "—",
+                },
+                {
+                    accessorKey: "mileage",
+                    header: ({ column }) => <ColumnHeader column={column} title="Mileage" />,
+                    cell: ({ row }) => (row.original as any).mileage ?? "—",
+                },
+                actionsColumn(),
+            ]}
+            renderForm={({ resourceId, initialData, onSuccess }) => (
+                <VehicleForm
+                    resourceId={resourceId}
+                    initialData={initialData}
+                    onSuccess={onSuccess}
+                />
+            )}
+        />
+    )
+}
\ No newline at end of file
diff --git a/app/(authenticated)/setting/shop_type/page.tsx b/app/(authenticated)/setting/shop_type/page.tsx
new file mode 100644
index 0000000..4e4c958
--- /dev/null
+++ b/app/(authenticated)/setting/shop_type/page.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import { ResourcePage } from "@/shared/data-view/resource-page"
+import { ColumnHeader } from "@/shared/data-view/table-view"
+import { ShopTypeForm } from "@/modules/settings/shop-type/shop-type-form"
+import { SHOP_TYPE_ROUTES } from "@repo/api"
+import type { ShopTypesClient } from "@repo/api"
+import { CheckIcon, XIcon } from "lucide-react"
+
+export default function ShopTypesPage() {
+    return (
+        <ResourcePage<ShopTypesClient>
+            pageTitle="Shop Types"
+            title="Shop Type"
+            routeKey={SHOP_TYPE_ROUTES.INDEX}
+            getClient={(api) => api.shopTypes}
+            columns={({ actionsColumn }) => [
+                {
+                    accessorKey: "title",
+                    header: ({ column }) => <ColumnHeader column={column} title="Title" />,
+                },
+                {
+                    accessorKey: "shop_type",
+                    header: ({ column }) => <ColumnHeader column={column} title="Type" />,
+                },
+                {
+                    accessorKey: "note",
+                    header: ({ column }) => <ColumnHeader column={column} title="Note" />,
+                    cell: ({ row }) => (
+                        <span className="text-muted-foreground line-clamp-1">
+                            {(row.original as any).note ?? "—"}
+                        </span>
+                    ),
+                },
+                {
+                    accessorKey: "is_default",
+                    header: ({ column }) => <ColumnHeader column={column} title="Default" />,
+                    cell: ({ row }) =>
+                        (row.original as any).is_default
+                            ? <CheckIcon className="h-4 w-4 text-green-600" />
+                            : <XIcon className="h-4 w-4 text-muted-foreground" />,
+                },
+                actionsColumn(),
+            ]}
+            renderForm={({ resourceId, initialData, onSuccess }) => (
+                <ShopTypeForm
+                    resourceId={resourceId}
+                    initialData={initialData}
+                    onSuccess={onSuccess}
+                />
+            )}
+        />
+    )
+}
diff --git a/app/globals.css b/app/globals.css
index 446b465..d4cf055 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -5,125 +5,175 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
-    --font-heading: var(--font-sans);
-    --font-sans: var(--font-sans);
-    --color-sidebar-ring: var(--sidebar-ring);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar: var(--sidebar);
-    --color-chart-5: var(--chart-5);
-    --color-chart-4: var(--chart-4);
-    --color-chart-3: var(--chart-3);
-    --color-chart-2: var(--chart-2);
-    --color-chart-1: var(--chart-1);
-    --color-ring: var(--ring);
-    --color-input: var(--input);
-    --color-border: var(--border);
-    --color-destructive: var(--destructive);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-accent: var(--accent);
-    --color-muted-foreground: var(--muted-foreground);
-    --color-muted: var(--muted);
-    --color-secondary-foreground: var(--secondary-foreground);
-    --color-secondary: var(--secondary);
-    --color-primary-foreground: var(--primary-foreground);
-    --color-primary: var(--primary);
-    --color-popover-foreground: var(--popover-foreground);
-    --color-popover: var(--popover);
-    --color-card-foreground: var(--card-foreground);
-    --color-card: var(--card);
-    --color-foreground: var(--foreground);
-    --color-background: var(--background);
-    --radius-sm: calc(var(--radius) * 0.6);
-    --radius-md: calc(var(--radius) * 0.8);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) * 1.4);
-    --radius-2xl: calc(var(--radius) * 1.8);
-    --radius-3xl: calc(var(--radius) * 2.2);
-    --radius-4xl: calc(var(--radius) * 2.6);
+  --font-heading: var(--font-sans);
+  --font-sans: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+
+  --shadow-glow : 0 0 10px var(--primary);
 }
 
 :root {
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.205 0 0);
-    --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(0.97 0 0);
-    --secondary-foreground: oklch(0.205 0 0);
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    --chart-1: oklch(0.87 0 0);
-    --chart-2: oklch(0.556 0 0);
-    --chart-3: oklch(0.439 0 0);
-    --chart-4: oklch(0.371 0 0);
-    --chart-5: oklch(0.269 0 0);
-    --radius: 0.625rem;
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.205 0 0);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
+  --background: oklch(96.416% 0.00011 271.152);
+  --foreground: oklch(0.062 0 0);
+  --card: oklch(0.975 0 0);
+  --card-foreground: oklch(0.281 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.577 0.245 27.325);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.949 0 0);
+  --muted-foreground: oklch(0.6 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
 .dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    --chart-1: oklch(0.87 0 0);
-    --chart-2: oklch(0.556 0 0);
-    --chart-3: oklch(0.439 0 0);
-    --chart-4: oklch(0.371 0 0);
-    --chart-5: oklch(0.269 0 0);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(75.417% 0.14818 18.15);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
 @layer base {
   * {
     @apply border-border outline-ring/50;
-    }
+  }
+
   body {
     @apply bg-background text-foreground;
-    }
+  }
+
   html {
     @apply font-sans;
-    }
+  }
+}
+
+
+@layer utilities {
+  .dashboard-nav-item {
+    @apply 
+    relative
+    overflow-hidden
+    data-active:bg-primary/10
+    data-active:text-primary
+    data-active:hover:text-primary
+    data-active:hover:bg-primary/15
+    transition-all
+    duration-300;
+  }
+
+  /* Accent bar — only in expanded mode */
+  /* .dashboard-nav-item:not([data-collapsed="true"])::after {
+    content: "";
+    position: absolute;
+    inset-inline-end: 0.25rem;
+    height: 80%;
+    border-radius: var(--radius-md);
+    z-index: 10;
+    box-shadow: 0 0 6px var(--primary);
+  }
+
+  .dashboard-nav-item:not([data-collapsed="true"])[data-active="true"]::after {
+    width: 0.25rem;
+    background-color: var(--primary);
+  } */
+
+  /* Collapsed mode: icon centered, no bar */
+  .dashboard-nav-item[data-collapsed="true"] {
+    @apply justify-center;
+  }
+
+  .dashboard-nav-sub-item {
+    @apply
+    transition-colors
+    duration-200
+    data-active:text-primary
+    data-active:font-medium
+    data-active:bg-primary/5
+    hover:text-primary/80;
+  }
 }
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index a4c7321..326b949 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,10 +1,14 @@
-import { Geist, Geist_Mono, Inter } from "next/font/google"
+import { Geist_Mono, Inter } from "next/font/google"
 
 import "./globals.css"
-import { ThemeProvider } from "@/components/theme-provider"
-import { cn } from "@/lib/utils";
+import { QueryProvider } from "@/shared/components/query-provider"
+import { ThemeProvider } from "@/shared/components/theme-provider"
+import { Toaster } from "@/shared/components/ui/sonner"
+import { ConfirmDialog } from "@/shared/components/confirm-dialog"
+import { NuqsAdapter } from "nuqs/adapters/next/app"
+import { cn } from "@/shared/lib/utils"
 
-const inter = Inter({subsets:['latin'],variable:'--font-sans'})
+const inter = Inter({ subsets: ["latin"], variable: "--font-sans" })
 
 const fontMono = Geist_Mono({
   subsets: ["latin"],
@@ -23,7 +27,13 @@ export default function RootLayout({
       className={cn("antialiased", fontMono.variable, "font-sans", inter.variable)}
     >
       <body>
-        <ThemeProvider>{children}</ThemeProvider>
+        <NuqsAdapter>
+          <ThemeProvider>
+            <QueryProvider>{children}</QueryProvider>
+            <Toaster />
+            <ConfirmDialog />
+          </ThemeProvider>
+        </NuqsAdapter>
       </body>
     </html>
   )
diff --git a/app/page.tsx b/app/page.tsx
deleted file mode 100644
index 98ff035..0000000
--- a/app/page.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Button } from "@/components/ui/button"
-
-export default function Page() {
-  return (
-    <div className="flex min-h-svh p-6">
-      <div className="flex max-w-md min-w-0 flex-col gap-4 text-sm leading-loose">
-        <div>
-          <h1 className="font-medium">Project ready!</h1>
-          <p>You may now add components and start building.</p>
-          <p>We&apos;ve already added the button component for you.</p>
-          <Button className="mt-2">Button</Button>
-        </div>
-        <div className="font-mono text-xs text-muted-foreground">
-          (Press <kbd>d</kbd> to toggle dark mode)
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/base/components/auth-store-initializer.tsx b/base/components/auth-store-initializer.tsx
new file mode 100644
index 0000000..c6df945
--- /dev/null
+++ b/base/components/auth-store-initializer.tsx
@@ -0,0 +1,19 @@
+"use client"
+
+import { useRef } from "react"
+import { useAuthStore } from "@/shared/stores/auth-store"
+import type { AuthUser } from "@repo/api"
+
+/**
+ * Synchronously initializes the auth store from server-side token/user before
+ * any child component renders. This avoids the first-render race condition where
+ * useEffect-based hydration hasn't fired yet and API requests go out without a token.
+ */
+export function AuthStoreInitializer({ token, user }: { token: string; user: AuthUser }) {
+    const initialized = useRef(false)
+    if (!initialized.current) {
+        initialized.current = true
+        useAuthStore.setState({ token, user, isAuthenticated: true })
+    }
+    return null
+}
diff --git a/base/components/layout/dashboard/app-sidebar.tsx b/base/components/layout/dashboard/app-sidebar.tsx
new file mode 100644
index 0000000..427afa6
--- /dev/null
+++ b/base/components/layout/dashboard/app-sidebar.tsx
@@ -0,0 +1,240 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { ChevronRight, Circle } from "lucide-react"
+
+import type { NavGroup, NavItem } from "@/base/types/navigation"
+import { cn } from "@/shared/lib/utils"
+import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from "@/shared/components/ui/collapsible"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/shared/components/ui/dropdown-menu"
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarGroup,
+    SidebarGroupLabel,
+    SidebarHeader,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarMenuSub,
+    SidebarMenuSubButton,
+    SidebarMenuSubItem,
+    SidebarRail,
+    useSidebar,
+} from "@/shared/components/ui/sidebar"
+
+type AppSidebarProps = React.ComponentProps<typeof Sidebar> & {
+    navGroups: NavGroup[]
+    logo?: React.ReactNode
+}
+
+export function AppSidebar({ navGroups, logo, ...props }: AppSidebarProps) {
+    const { state, isMobile } = useSidebar()
+    const isCollapsed = state === "collapsed" && !isMobile
+
+    return (
+        <Sidebar collapsible="icon" {...props} className="bg-card">
+            {logo && (
+                <SidebarHeader className="flex p-4">
+                    {logo}
+                </SidebarHeader>
+            )}
+            <SidebarContent className={cn("transition-[padding] duration-200", !isCollapsed && "ps-2")}>
+                {navGroups.map((group, groupIndex) => (
+                    <SidebarGroup key={group.label ?? groupIndex}>
+                        {group.label && (
+                            <SidebarGroupLabel className="uppercase text-xs tracking-wider text-muted-foreground">
+                                {group.label}
+                            </SidebarGroupLabel>
+                        )}
+                        <SidebarMenu>
+                            {group.items.map((item) =>
+                                item.items && item.items.length > 0 ? (
+                                    <CollapsibleNavItem key={item.href} item={item} isCollapsed={isCollapsed} />
+                                ) : (
+                                    <SimpleNavItem key={item.href} item={item} isCollapsed={isCollapsed} />
+                                )
+                            )}
+                        </SidebarMenu>
+                    </SidebarGroup>
+                ))}
+            </SidebarContent>
+            <SidebarRail />
+        </Sidebar>
+    )
+}
+
+function SimpleNavItem({ item, isCollapsed }: { item: NavItem; isCollapsed: boolean }) {
+    const pathname = usePathname()
+    const isActive = item.isActive ?? pathname === item.href
+
+    return (
+        <SidebarMenuItem>
+            <SidebarMenuButton
+                 
+                asChild
+                isActive={isActive}
+                tooltip={item.title}
+                className="dashboard-nav-item"
+                data-collapsed={isCollapsed}
+            >
+                <Link href={item.href}>
+                    {item.icon}
+                    {
+                        !isCollapsed &&
+                        <span>{item.title}</span>
+                    }
+                </Link>
+            </SidebarMenuButton>
+        </SidebarMenuItem>
+    )
+}
+
+function CollapsibleNavItem({ item, isCollapsed }: { item: NavItem; isCollapsed: boolean }) {
+    const pathname = usePathname()
+    const isChildActive = item.items?.some((sub) => pathname === sub.href)
+    const isActive = item.isActive ?? (pathname === item.href || isChildActive === true)
+
+    // Collapsed sidebar → flyout dropdown with sub-items
+    if (isCollapsed) {
+        return (
+            <SidebarMenuItem>
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <SidebarMenuButton
+                             
+                            isActive={isActive}
+                            tooltip={item.title}
+                            className="dashboard-nav-item"
+                            data-collapsed={isCollapsed}
+                        >
+                            <span
+                                className={cn(
+                                    "transition-transform duration-300",
+                                    isActive && "text-primary"
+                                )}
+                            >
+                                {item.icon}
+                            </span>
+                            {
+                                !isCollapsed &&
+                                <span>{item.title}</span>
+                            }
+                        </SidebarMenuButton>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                        side="right"
+                        align="start"
+                        sideOffset={4}
+                        className="min-w-45"
+                    >
+                        <DropdownMenuLabel className="text-xs text-muted-foreground">
+                            {item.title}
+                        </DropdownMenuLabel>
+                        <DropdownMenuSeparator />
+                        {item.items?.map((sub) => {
+                            const isSubActive = sub.isActive ?? pathname === sub.href
+                            return (
+                                <DropdownMenuItem key={sub.href} asChild>
+                                    <Link
+                                        href={sub.href}
+                                        className={cn(
+                                            "flex items-center gap-2",
+                                            isSubActive && "bg-primary/10 text-primary font-medium"
+                                        )}
+                                    >
+                                        {sub.icon ? (
+                                            <span className={cn("shrink-0 [&>svg]:size-4", isSubActive ? "text-primary" : "text-muted-foreground/70")}>
+                                                {sub.icon}
+                                            </span>
+                                        ) : (
+                                            <Circle
+                                                className={cn(
+                                                    "size-1.5",
+                                                    isSubActive ? "fill-primary text-primary" : "fill-muted-foreground/50 text-muted-foreground/50"
+                                                )}
+                                            />
+                                        )}
+                                        {sub.title}
+                                    </Link>
+                                </DropdownMenuItem>
+                            )
+                        })}
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </SidebarMenuItem>
+        )
+    }
+
+    // Expanded sidebar → collapsible/accordion sub-menu
+    return (
+        <Collapsible asChild defaultOpen={isActive} className="group/collapsible">
+            <SidebarMenuItem>
+                <CollapsibleTrigger asChild>
+                    <SidebarMenuButton   tooltip={item.title} isActive={isActive} className="dashboard-nav-item" data-collapsed={isCollapsed}>
+                        <span
+                            className={cn(
+                                "transition-transform duration-300",
+                                isActive && "text-primary"
+                            )}
+                        >
+                            {item.icon}
+                        </span>
+
+                            
+                        <span>{item.title}</span>
+                        
+                        <ChevronRight
+                            className={cn(
+                                "ms-auto size-4 shrink-0 transition-transform duration-300 ease-[cubic-bezier(0.87,0,0.13,1)]",
+                                "group-data-[state=open]/collapsible:rotate-90"
+                            )}
+                        />
+                    </SidebarMenuButton>
+                </CollapsibleTrigger>
+                <CollapsibleContent className="overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up">
+                    <SidebarMenuSub>
+                        {item.items?.map((sub) => {
+                            const isSubActive = sub.isActive ?? pathname === sub.href
+                            return (
+                                <SidebarMenuSubItem key={sub.href}>
+                                    <SidebarMenuSubButton asChild isActive={isSubActive} className="dashboard-nav-sub-item">
+                                        <Link href={sub.href}>
+                                            {sub.icon ? (
+                                                <span className={cn("shrink-0 transition-colors duration-200 [&>svg]:size-4", isSubActive ? "text-primary" : "text-muted-foreground/70 group-hover/menu-sub-item:text-foreground")}>
+                                                    {sub.icon}
+                                                </span>
+                                            ) : (
+                                                <Circle
+                                                    className={cn(
+                                                        "size-1.5 transition-colors duration-200",
+                                                        isSubActive
+                                                            ? "fill-primary text-primary"
+                                                            : "fill-muted-foreground/40 text-muted-foreground/40 group-hover/menu-sub-item:fill-foreground group-hover/menu-sub-item:text-foreground"
+                                                    )}
+                                                />
+                                            )}
+                                            <span>{sub.title}</span>
+                                        </Link>
+                                    </SidebarMenuSubButton>
+                                </SidebarMenuSubItem>
+                            )
+                        })}
+                    </SidebarMenuSub>
+                </CollapsibleContent>
+            </SidebarMenuItem>
+        </Collapsible>
+    )
+}
diff --git a/base/components/layout/dashboard/dashboard-header.tsx b/base/components/layout/dashboard/dashboard-header.tsx
new file mode 100644
index 0000000..17ab906
--- /dev/null
+++ b/base/components/layout/dashboard/dashboard-header.tsx
@@ -0,0 +1,210 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { useTheme } from "next-themes"
+import {
+  BellIcon,
+  LogOutIcon,
+  MoonIcon,
+  SearchIcon,
+  SunIcon,
+  UserIcon,
+} from "lucide-react"
+
+import type { UserInfo } from "@/base/types/navigation"
+import { useAuthStore } from "@/shared/stores/auth-store"
+import { cn } from "@/shared/lib/utils"
+import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar"
+import { Button } from "@/shared/components/ui/button"
+import { SidebarTrigger } from "@/shared/components/ui/sidebar"
+import {
+  CommandDialog,
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+} from "@/shared/components/ui/command"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/shared/components/ui/dropdown-menu"
+import { Separator } from "@/shared/components/ui/separator"
+
+type DashboardHeaderProps = {
+  user?: UserInfo
+  actions?: React.ReactNode
+  className?: string
+}
+
+export function DashboardHeader({ actions, className }: DashboardHeaderProps) {
+  const { resolvedTheme, setTheme } = useTheme()
+  const [searchOpen, setSearchOpen] = useState(false)
+  const { logout, user } = useAuthStore((s) => s)
+  const router = useRouter()
+
+  const handleLogout = useCallback(async () => {
+    await logout()
+    router.push("/login")
+  }, [logout, router])
+
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault()
+        setSearchOpen((prev) => !prev)
+      }
+    }
+    window.addEventListener("keydown", onKeyDown)
+    return () => window.removeEventListener("keydown", onKeyDown)
+  }, [])
+
+  const toggleTheme = useCallback(() => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark")
+  }, [resolvedTheme, setTheme])
+
+  return (
+    <header
+      className={cn(
+        "sticky top-0 z-30 flex h-18 shrink-0 items-center gap-2 border-b bg-card px-4",
+        className,
+      )}
+    >
+      {/* Sidebar toggle — mobile: hamburger, desktop: collapse */}
+      <SidebarTrigger className="-ms-2" />
+      <Separator orientation="vertical" />
+
+      {/* Left side — default actions */}
+      <div className="flex items-center gap-1">
+        {/* User dropdown */}
+        {/* {user && ( */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="flex items-center gap-2 px-2">
+              <Avatar >
+                {user?.avatar && <AvatarImage src={user?.avatar as string} alt={user?.name} />}
+                <AvatarFallback>
+                  {user?.initials ?? user?.name.charAt(0).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <span className="hidden text-sm font-medium md:inline-block">
+                {user?.name}
+              </span>
+            </Button>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent align="end" className="w-56">
+            {/* User info header */}
+            <DropdownMenuLabel className="font-normal">
+              <div className="flex items-center gap-3 py-1">
+                <Avatar size="lg">
+                  {user?.avatar && <AvatarImage src={user?.avatar as string} alt={user?.name} />}
+                  <AvatarFallback className="text-base">
+                    {user?.initials ?? user?.name.charAt(0).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="flex flex-col">
+                  <span className="text-sm font-medium text-foreground">{user?.name}</span>
+                  {user?.email && (
+                    <span className="text-xs text-muted-foreground">{user?.email}</span>
+                  )}
+                  {user?.role && (
+                    <span className="mt-0.5 text-xs font-medium text-primary">{user?.role}</span>
+                  )}
+                </div>
+              </div>
+            </DropdownMenuLabel>
+
+            <DropdownMenuSeparator />
+
+            <DropdownMenuGroup>
+              <DropdownMenuItem asChild>
+                <Link href="/profile">
+                  <UserIcon />
+                  Profile
+                </Link>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+
+            <DropdownMenuSeparator />
+
+            <DropdownMenuItem variant="destructive" onSelect={handleLogout}>
+              <LogOutIcon />
+              Logout
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        {/* )} */}
+
+
+        {/* Search trigger */}
+        <Button
+          variant="outline"
+          className="hidden h-8 w-56 justify-start gap-2 text-muted-foreground md:flex"
+          onClick={() => setSearchOpen(true)}
+        >
+          <SearchIcon className="size-4" />
+          <span className="text-sm">Search…</span>
+          <kbd className="pointer-events-none ms-auto inline-flex h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
+            ⌘K
+          </kbd>
+        </Button>
+
+        {/* Mobile search icon */}
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          className="md:hidden"
+          aria-label="Search"
+          onClick={() => setSearchOpen(true)}
+        >
+          <SearchIcon className="size-4" />
+        </Button>
+
+        {/* Theme toggle */}
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          aria-label="Toggle theme"
+          onClick={toggleTheme}
+        >
+          <SunIcon className="size-4 rotate-0 scale-100 transition-transform dark:-rotate-90 dark:scale-0" />
+          <MoonIcon className="absolute size-4 rotate-90 scale-0 transition-transform dark:rotate-0 dark:scale-100" />
+        </Button>
+
+        {/* Notifications */}
+        <Button variant="ghost" size="icon-sm" aria-label="Notifications">
+          <BellIcon className="size-4" />
+        </Button>
+      </div>
+
+      {/* Search command dialog */}
+      <CommandDialog open={searchOpen} onOpenChange={setSearchOpen}>
+        <Command>
+          <CommandInput placeholder="Type to search…" />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Quick Actions">
+              <CommandItem>Dashboard</CommandItem>
+              <CommandItem>Job Cards</CommandItem>
+              <CommandItem>Customers</CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </CommandDialog>
+
+      {/* Right side — custom actions */}
+      {actions && (
+        <div className="ms-auto flex items-center gap-2">{actions}</div>
+      )}
+    </header>
+  )
+}
diff --git a/base/components/layout/dashboard/dashboard-layout.tsx b/base/components/layout/dashboard/dashboard-layout.tsx
new file mode 100644
index 0000000..4152104
--- /dev/null
+++ b/base/components/layout/dashboard/dashboard-layout.tsx
@@ -0,0 +1,41 @@
+"use client"
+
+import type { NavGroup, UserInfo } from "@/base/types/navigation"
+import { SidebarInset, SidebarProvider } from "@/shared/components/ui/sidebar"
+import { TooltipProvider } from "@/shared/components/ui/tooltip"
+import { AppSidebar } from "./app-sidebar"
+import { DashboardHeader } from "./dashboard-header"
+
+type DashboardLayoutProps = {
+  children: React.ReactNode
+  /** Navigation groups rendered in the sidebar */
+  navGroups: NavGroup[]
+  /** Logo element displayed at the top of the sidebar */
+  logo?: React.ReactNode
+  /** Current user info shown in the header */
+  user?: UserInfo
+  /** Custom actions rendered in the header (e.g. session timer, clock-in button) */
+  headerActions?: React.ReactNode
+  /** Default sidebar open state */
+  defaultOpen?: boolean
+}
+
+export function DashboardLayout({
+  children,
+  navGroups,
+  logo,
+  user,
+  headerActions,
+  defaultOpen = true,
+}: DashboardLayoutProps) {
+  return (
+    <TooltipProvider>
+      <SidebarProvider defaultOpen={defaultOpen}>
+        <AppSidebar navGroups={navGroups} logo={logo} />
+        <SidebarInset>  
+          {children}
+        </SidebarInset>
+      </SidebarProvider>
+    </TooltipProvider>
+  )
+}
diff --git a/base/components/layout/dashboard/dashboard-page.tsx b/base/components/layout/dashboard/dashboard-page.tsx
new file mode 100644
index 0000000..08325ae
--- /dev/null
+++ b/base/components/layout/dashboard/dashboard-page.tsx
@@ -0,0 +1,20 @@
+import { cn } from '@/shared/lib/utils'
+import { title } from 'process'
+import React from 'react'
+
+export default function DashboardPage({ children, header, title, fullscreen }: { children: React.ReactNode, header: React.ReactNode, title?: string, fullscreen?: boolean }) {
+    return (
+        <div className='page'>
+            <header>
+                {header}
+            </header>
+            <main className={cn('p-4 lg:p-8 w-full h-full', fullscreen && 'h-screen p-0 lg:p-0')}>
+                {
+                    title &&
+                    <h2 className='text-lg lg:text-2xl font-bold mb-4'>  {title}</h2>
+                }
+                {children}
+            </main>
+        </div>
+    )
+}
diff --git a/base/components/layout/dashboard/index.ts b/base/components/layout/dashboard/index.ts
new file mode 100644
index 0000000..21d6b95
--- /dev/null
+++ b/base/components/layout/dashboard/index.ts
@@ -0,0 +1,3 @@
+export { DashboardLayout } from "./dashboard-layout"
+export { AppSidebar } from "./app-sidebar"
+export { DashboardHeader } from "./dashboard-header"
diff --git a/base/types/navigation.ts b/base/types/navigation.ts
new file mode 100644
index 0000000..93fd3c0
--- /dev/null
+++ b/base/types/navigation.ts
@@ -0,0 +1,31 @@
+import { ReactNode } from "react"
+
+ 
+export type NavItem = {
+  title: string
+  href: string
+  icon?: ReactNode
+  isActive?: boolean
+  badge?: string | number
+  items?: NavSubItem[]
+}
+
+export type NavSubItem = {
+  title: string
+  href: string
+  icon?: ReactNode
+  isActive?: boolean
+}
+
+export type NavGroup = {
+  label?: string
+  items: NavItem[]
+}
+
+export type UserInfo = {
+  name: string
+  email?: string
+  avatar?: string
+  initials?: string
+  role?: string
+}
diff --git a/components.json b/components.json
index f4ec6d1..900b31e 100644
--- a/components.json
+++ b/components.json
@@ -13,11 +13,11 @@
   "iconLibrary": "lucide",
   "rtl": true,
   "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
+    "components": "@/shared/components",
+    "utils": "@/shared/lib/utils",
+    "ui": "@/shared/components/ui",
+    "lib": "@/shared/lib",
+    "hooks": "@/shared/hooks"
   },
   "menuColor": "default",
   "menuAccent": "subtle",
diff --git a/cypress.config.ts b/cypress.config.ts
new file mode 100644
index 0000000..830bcbc
--- /dev/null
+++ b/cypress.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from "cypress"
+
+export default defineConfig({
+    e2e: {
+        baseUrl: "http://localhost:3000",
+        env: {
+            NEXT_PUBLIC_API_URL: "https://newgarage.yslootahtech.com"
+        },
+        specPattern: "cypress/e2e/**/*.cy.{ts,tsx}",
+        supportFile: "cypress/support/e2e.ts",
+        viewportWidth: 1280,
+        viewportHeight: 720,
+        defaultCommandTimeout: 10000,
+        requestTimeout: 10000,
+    },
+})
diff --git a/cypress/e2e/customers/customer-form-integration.cy.ts b/cypress/e2e/customers/customer-form-integration.cy.ts
new file mode 100644
index 0000000..5141b99
--- /dev/null
+++ b/cypress/e2e/customers/customer-form-integration.cy.ts
@@ -0,0 +1,293 @@
+describe("Customer Form – Integration Tests", () => {
+  beforeEach(() => {
+    cy.login()
+
+    cy.fixture("customers").then((data) => {
+      cy.intercept("GET", "**/api/referral-sources", {
+        statusCode: 200,
+        body: data.referral_sources,
+      }).as("getReferralSources")
+
+      cy.intercept("GET", "**/api/payment-terms", {
+        statusCode: 200,
+        body: data.payment_terms,
+      }).as("getPaymentTerms")
+
+      cy.intercept("GET", "**/api/countries", {
+        statusCode: 200,
+        body: data.countries,
+      }).as("getCountries")
+
+      cy.intercept("GET", "**/api/states", {
+        statusCode: 200,
+        body: data.states,
+      }).as("getStates")
+
+      cy.intercept("GET", "**/api/customers*", {
+        statusCode: 200,
+        body: { success: true, data: { data: [], pagination: { total: 0 } } },
+      }).as("getCustomers")
+    })
+
+    cy.visit("/sales/customers")
+    cy.contains("button", "Create Customer").click()
+    cy.get("[role='dialog']").should("be.visible")
+  })
+
+  // ── Form interaction flow ──
+
+  describe("Field interactions", () => {
+    it("should clear a text field after typing", () => {
+      cy.get("[role='dialog']").within(() => {
+        cy.get("input[name='first_name']")
+          .type("John")
+          .should("have.value", "John")
+          .clear()
+          .should("have.value", "")
+      })
+    })
+
+    it("should handle special characters in text inputs", () => {
+      cy.get("[role='dialog']").within(() => {
+        cy.get("input[name='first_name']").type("José-María").should("have.value", "José-María")
+        cy.get("input[name='last_name']").type("O'Brien").should("have.value", "O'Brien")
+        cy.get("input[name='company_name']").type("Smith & Co.").should("have.value", "Smith & Co.")
+      })
+    })
+
+    it("should accept various email formats", () => {
+      cy.get("[role='dialog']").within(() => {
+        cy.get("input[name='first_name']").type("Test")
+        cy.get("input[name='last_name']").type("User")
+
+        // Valid email should not show error
+        cy.get("input[name='email']").type("user+tag@sub.domain.com")
+        cy.contains("button", "Create Customer").click()
+        cy.contains("Enter a valid email address").should("not.exist")
+      })
+    })
+
+    it("should handle phone number input", () => {
+      cy.get("[role='dialog']").within(() => {
+        cy.get("input[name='phone']")
+          .type("0501234567")
+          .should("have.value", "0501234567")
+
+        cy.get("input[name='alternate_phone']")
+          .type("+971501234567")
+          .should("have.value", "+971501234567")
+      })
+    })
+  })
+
+  // ── Async select integration ──
+
+  describe("Async select fields", () => {
+    it("should show loading state while fetching referral sources", () => {
+      cy.intercept("GET", "**/api/referral-sources", {
+        statusCode: 200,
+        body: { success: true, data: { data: [{ id: 1, name: "Google" }] } },
+        delay: 2000,
+      }).as("slowReferralSources")
+
+      // Reload to get the delayed intercept
+      cy.visit("/sales/customers")
+      cy.contains("button", "Create Customer").click()
+      cy.get("[role='dialog']").should("be.visible")
+
+      cy.get("[role='dialog']").within(() => {
+        cy.contains("label", "Referral Source").parent().find("input").click()
+      })
+
+      // The component should show a loading spinner
+      cy.get("[role='listbox']").should("be.visible")
+    })
+
+    it("should filter options by text input in combobox", () => {
+      cy.wait("@getReferralSources")
+
+      cy.get("[role='dialog']").within(() => {
+        cy.contains("label", "Referral Source").parent().find("input").click().type("Goo")
+      })
+
+      // Should show Google, shouldn't show Friend Referral
+      cy.get("[role='option']").contains("Google").should("exist")
+    })
+
+    it("should show empty state when no options match", () => {
+      cy.wait("@getCountries")
+
+      cy.get("[role='dialog']").within(() => {
+        cy.contains("label", "Country").parent().find("input").click().type("zzzzz")
+      })
+
+      cy.contains("No results found").should("be.visible")
+    })
+
+    it("should select a payment term from the combobox", () => {
+      cy.wait("@getPaymentTerms")
+
+      cy.get("[role='dialog']").within(() => {
+        cy.contains("label", "Payment Terms").parent().find("input").click()
+      })
+
+      cy.get("[role='option']").contains("Net 30").click()
+    })
+
+    it("should select a state from the combobox", () => {
+      cy.wait("@getStates")
+
+      cy.get("[role='dialog']").within(() => {
+        cy.contains("label", "State").parent().find("input").click()
+      })
+
+      cy.get("[role='option']").contains("Dubai").click()
+    })
+  })
+
+  // ── Validation edge cases ──
+
+  describe("Validation edge cases", () => {
+    it("should validate only on submit (not on blur)", () => {
+      cy.get("[role='dialog']").within(() => {
+        // Focus and blur first_name without typing
+        cy.get("input[name='first_name']").focus().blur()
+
+        // Error should NOT appear yet (react-hook-form validates on submit by default)
+        cy.contains("First name is required").should("not.exist")
+      })
+    })
+
+    it("should clear validation errors when user corrects input", () => {
+      cy.get("[role='dialog']").within(() => {
+        // Trigger validation
+        cy.contains("button", "Create Customer").click()
+        cy.contains("First name is required").should("be.visible")
+
+        // Fix the error
+        cy.get("input[name='first_name']").type("John")
+        cy.contains("First name is required").should("not.exist")
+      })
+    })
+
+    it("should trim whitespace-only inputs and still require first_name", () => {
+      cy.get("[role='dialog']").within(() => {
+        cy.get("input[name='first_name']").type("   ")
+        cy.get("input[name='last_name']").type("Doe")
+        cy.contains("button", "Create Customer").click()
+      })
+    })
+
+    it("should allow submission with only required fields", () => {
+      cy.fixture("customers").then((data) => {
+        cy.intercept("POST", "**/api/customers", {
+          statusCode: 201,
+          body: data.customer_created,
+        }).as("createCustomer")
+      })
+
+      cy.get("[role='dialog']").within(() => {
+        cy.get("input[name='first_name']").type("Jane")
+        cy.get("input[name='last_name']").type("Smith")
+        cy.contains("button", "Create Customer").click()
+      })
+
+      cy.wait("@createCustomer").its("request.body").should((body) => {
+        expect(body.first_name).to.eq("Jane")
+        expect(body.last_name).to.eq("Smith")
+        // Optional fields should be empty or undefined
+        expect(body.company_name).to.satisfy(
+          (v: unknown) => v === "" || v === undefined || v === null,
+        )
+      })
+    })
+  })
+
+  // ── API error scenarios ──
+
+  describe("API error handling", () => {
+    it("should handle network error gracefully", () => {
+      cy.intercept("POST", "**/api/customers", { forceNetworkError: true }).as(
+        "networkError",
+      )
+
+      cy.get("[role='dialog']").within(() => {
+        cy.get("input[name='first_name']").type("John")
+        cy.get("input[name='last_name']").type("Doe")
+        cy.contains("button", "Create Customer").click()
+      })
+
+      cy.wait("@networkError")
+
+      cy.get("[role='dialog']").within(() => {
+        cy.contains("Failed to create customer").should("be.visible")
+      })
+    })
+
+    it("should handle 500 server error", () => {
+      cy.intercept("POST", "**/api/customers", {
+        statusCode: 500,
+        body: { success: false, message: "Internal server error" },
+      }).as("serverError")
+
+      cy.get("[role='dialog']").within(() => {
+        cy.get("input[name='first_name']").type("John")
+        cy.get("input[name='last_name']").type("Doe")
+        cy.contains("button", "Create Customer").click()
+      })
+
+      cy.wait("@serverError")
+
+      cy.get("[role='dialog']").within(() => {
+        cy.contains("Failed to create customer").should("be.visible")
+      })
+    })
+
+    it("should handle 422 validation error from server", () => {
+      cy.intercept("POST", "**/api/customers", {
+        statusCode: 422,
+        body: {
+          success: false,
+          message: "The email has already been taken.",
+          errors: { email: ["The email has already been taken."] },
+        },
+      }).as("validationError")
+
+      cy.get("[role='dialog']").within(() => {
+        cy.get("input[name='first_name']").type("John")
+        cy.get("input[name='last_name']").type("Doe")
+        cy.get("input[name='email']").type("existing@example.com")
+        cy.contains("button", "Create Customer").click()
+      })
+
+      cy.wait("@validationError")
+
+      cy.get("[role='dialog']").within(() => {
+        cy.contains("Failed to create customer").should("be.visible")
+      })
+    })
+
+    it("should re-enable submit button after a failed request", () => {
+      cy.intercept("POST", "**/api/customers", {
+        statusCode: 422,
+        body: {
+          success: false,
+          message: "Validation failed",
+          errors: {},
+        },
+      }).as("failedRequest")
+
+      cy.get("[role='dialog']").within(() => {
+        cy.get("input[name='first_name']").type("John")
+        cy.get("input[name='last_name']").type("Doe")
+        cy.contains("button", "Create Customer").click()
+      })
+
+      cy.wait("@failedRequest")
+
+      cy.get("[role='dialog']").within(() => {
+        cy.contains("button", "Create Customer").should("not.be.disabled")
+      })
+    })
+  })
+})
diff --git a/cypress/e2e/customers/customer-form.cy.ts b/cypress/e2e/customers/customer-form.cy.ts
new file mode 100644
index 0000000..7779ca5
--- /dev/null
+++ b/cypress/e2e/customers/customer-form.cy.ts
@@ -0,0 +1,347 @@
+describe("Customer Form", () => {
+  beforeEach(() => {
+    // Authenticate via API and set cookies
+    cy.login()
+
+    // Intercept lookup APIs with fixture data
+    cy.fixture("customers").then((data) => {
+      cy.intercept("GET", "**/api/referral-sources", {
+        statusCode: 200,
+        body: data.referral_sources,
+      }).as("getReferralSources")
+
+      cy.intercept("GET", "**/api/payment-terms", {
+        statusCode: 200,
+        body: data.payment_terms,
+      }).as("getPaymentTerms")
+
+      cy.intercept("GET", "**/api/countries", {
+        statusCode: 200,
+        body: data.countries,
+      }).as("getCountries")
+
+      cy.intercept("GET", "**/api/states", {
+        statusCode: 200,
+        body: data.states,
+      }).as("getStates")
+
+      // Intercept customer list (GET) for the data table
+      cy.intercept("GET", "**/api/customers*", {
+        statusCode: 200,
+        body: { success: true, data: { data: [], pagination: { total: 0 } } },
+      }).as("getCustomers")
+    })
+
+    cy.visit("/sales/customers")
+  })
+
+  function openCustomerDialog() {
+    cy.contains("button", "Create Customer").click()
+    cy.get("[role='dialog']").should("be.visible")
+  }
+
+  // ── Rendering ──
+
+  it("should open the create customer dialog", () => {
+    openCustomerDialog()
+
+    cy.get("[role='dialog']").within(() => {
+      cy.contains("Create Customer").should("exist")
+    })
+  })
+
+  it("should display all form fields", () => {
+    openCustomerDialog()
+
+    cy.get("[role='dialog']").within(() => {
+      // Text fields
+      cy.get("input[name='first_name']").should("exist")
+      cy.get("input[name='last_name']").should("exist")
+      cy.get("input[name='company_name']").should("exist")
+      cy.get("input[name='email']").should("exist")
+      cy.get("input[name='phone']").should("exist")
+      cy.get("input[name='alternate_phone']").should("exist")
+      cy.get("input[name='address_line_1']").should("exist")
+      cy.get("input[name='address_line_2']").should("exist")
+      cy.get("input[name='city']").should("exist")
+      cy.get("input[name='zip_code']").should("exist")
+
+      // Labels
+      cy.contains("label", "First Name").should("exist")
+      cy.contains("label", "Last Name").should("exist")
+      cy.contains("label", "Email").should("exist")
+      cy.contains("label", "Salutation").should("exist")
+      cy.contains("label", "Customer Type").should("exist")
+      cy.contains("label", "Referral Source").should("exist")
+      cy.contains("label", "Payment Terms").should("exist")
+      cy.contains("label", "Country").should("exist")
+      cy.contains("label", "State").should("exist")
+    })
+  })
+
+  // ── Validation ──
+
+  it("should show validation errors for required fields", () => {
+    openCustomerDialog()
+
+    cy.get("[role='dialog']").within(() => {
+      cy.contains("button", "Create Customer").click()
+
+      // first_name and last_name are required
+      cy.contains("First name is required").should("be.visible")
+      cy.contains("Last name is required").should("be.visible")
+    })
+  })
+
+  it("should show email validation error for invalid email", () => {
+    openCustomerDialog()
+
+    cy.get("[role='dialog']").within(() => {
+      cy.get("input[name='email']").type("not-an-email")
+      cy.contains("button", "Create Customer").click()
+
+      cy.contains("Enter a valid email address").should("be.visible")
+    })
+  })
+
+  it("should not show email error when email is empty", () => {
+    openCustomerDialog()
+
+    cy.get("[role='dialog']").within(() => {
+      cy.get("input[name='first_name']").type("John")
+      cy.get("input[name='last_name']").type("Doe")
+      cy.contains("button", "Create Customer").click()
+
+      cy.contains("Enter a valid email address").should("not.exist")
+    })
+  })
+
+  // ── Text input ──
+
+  it("should fill in text fields", () => {
+    openCustomerDialog()
+
+    cy.get("[role='dialog']").within(() => {
+      cy.get("input[name='first_name']").type("John").should("have.value", "John")
+      cy.get("input[name='last_name']").type("Doe").should("have.value", "Doe")
+      cy.get("input[name='company_name']").type("Acme Corp").should("have.value", "Acme Corp")
+      cy.get("input[name='email']").type("john@example.com").should("have.value", "john@example.com")
+      cy.get("input[name='phone']").type("0501234567").should("have.value", "0501234567")
+      cy.get("input[name='address_line_1']").type("123 Main St").should("have.value", "123 Main St")
+      cy.get("input[name='city']").type("Dubai").should("have.value", "Dubai")
+      cy.get("input[name='zip_code']").type("00000").should("have.value", "00000")
+    })
+  })
+
+  // ── Select fields ──
+
+  it("should select a salutation from the dropdown", () => {
+    openCustomerDialog()
+
+    cy.get("[role='dialog']").within(() => {
+      // Click the Salutation select trigger
+      cy.contains("label", "Salutation")
+        .parent()
+        .find("[role='combobox'], button[data-slot='select-trigger']")
+        .click()
+    })
+
+    // Select option from the popover (may render outside the dialog)
+    cy.get("[role='option'], [role='listbox'] [data-value='Mr']")
+      .contains("Mr")
+      .click()
+  })
+
+  it("should select a customer type", () => {
+    openCustomerDialog()
+
+    cy.get("[role='dialog']").within(() => {
+      cy.contains("label", "Customer Type")
+        .parent()
+        .find("[role='combobox'], button[data-slot='select-trigger']")
+        .click()
+    })
+
+    cy.get("[role='option']").contains("Individual").click()
+  })
+
+  // ── Async select (Combobox) fields ──
+
+  it("should load and select a referral source", () => {
+    openCustomerDialog()
+
+    cy.wait("@getReferralSources")
+
+    cy.get("[role='dialog']").within(() => {
+      cy.contains("label", "Referral Source")
+        .parent()
+        .find("input")
+        .click()
+        .type("Google")
+    })
+
+    cy.get("[role='option']").contains("Google").click()
+  })
+
+  it("should load and select a country", () => {
+    openCustomerDialog()
+
+    cy.wait("@getCountries")
+
+    cy.get("[role='dialog']").within(() => {
+      cy.contains("label", "Country")
+        .parent()
+        .find("input")
+        .click()
+        .type("United")
+    })
+
+    cy.get("[role='option']").contains("United Arab Emirates").click()
+  })
+
+  // ── Successful submission ──
+
+  it("should submit the form successfully with required fields", () => {
+    cy.fixture("customers").then((data) => {
+      cy.intercept("POST", "**/api/customers", {
+        statusCode: 201,
+        body: data.customer_created,
+      }).as("createCustomer")
+    })
+
+    openCustomerDialog()
+
+    cy.get("[role='dialog']").within(() => {
+      cy.get("input[name='first_name']").type("John")
+      cy.get("input[name='last_name']").type("Doe")
+
+      cy.contains("button", "Create Customer").click()
+    })
+
+    cy.wait("@createCustomer").its("request.body").should((body) => {
+      expect(body.first_name).to.eq("John")
+      expect(body.last_name).to.eq("Doe")
+    })
+  })
+
+  it("should submit a fully filled form", () => {
+    cy.fixture("customers").then((data) => {
+      cy.intercept("POST", "**/api/customers", {
+        statusCode: 201,
+        body: data.customer_created,
+      }).as("createCustomer")
+    })
+
+    openCustomerDialog()
+
+    // Wait for async data
+    cy.wait("@getReferralSources")
+    cy.wait("@getPaymentTerms")
+    cy.wait("@getCountries")
+    cy.wait("@getStates")
+
+    cy.get("[role='dialog']").within(() => {
+      // Text fields
+      cy.get("input[name='first_name']").type("John")
+      cy.get("input[name='last_name']").type("Doe")
+      cy.get("input[name='company_name']").type("Doe Holdings")
+      cy.get("input[name='email']").type("john@example.com")
+      cy.get("input[name='phone']").type("0501234567")
+      cy.get("input[name='alternate_phone']").type("0551234567")
+      cy.get("input[name='address_line_1']").type("Street 10")
+      cy.get("input[name='address_line_2']").type("Near Central Plaza")
+      cy.get("input[name='city']").type("Dubai")
+      cy.get("input[name='zip_code']").type("00000")
+
+      // Submit
+      cy.contains("button", "Create Customer").click()
+    })
+
+    cy.wait("@createCustomer").its("request.body").should((body) => {
+      expect(body.first_name).to.eq("John")
+      expect(body.last_name).to.eq("Doe")
+      expect(body.company_name).to.eq("Doe Holdings")
+      expect(body.email).to.eq("john@example.com")
+      expect(body.phone).to.eq("0501234567")
+    })
+  })
+
+  // ── Error handling ──
+
+  it("should display API error on submission failure", () => {
+    cy.intercept("POST", "**/api/customers", {
+      statusCode: 422,
+      body: {
+        success: false,
+        message: "The given data was invalid.",
+        errors: { email: ["The email has already been taken."] },
+      },
+    }).as("createCustomerFail")
+
+    openCustomerDialog()
+
+    cy.get("[role='dialog']").within(() => {
+      cy.get("input[name='first_name']").type("John")
+      cy.get("input[name='last_name']").type("Doe")
+      cy.get("input[name='email']").type("john@example.com")
+
+      cy.contains("button", "Create Customer").click()
+    })
+
+    cy.wait("@createCustomerFail")
+
+    cy.get("[role='dialog']").within(() => {
+      cy.contains("Failed to create customer").should("be.visible")
+    })
+  })
+
+  it("should show loading state while submitting", () => {
+    cy.intercept("POST", "**/api/customers", {
+      statusCode: 201,
+      body: { success: true, data: { id: 1 } },
+      delay: 1000,
+    }).as("createCustomerSlow")
+
+    openCustomerDialog()
+
+    cy.get("[role='dialog']").within(() => {
+      cy.get("input[name='first_name']").type("John")
+      cy.get("input[name='last_name']").type("Doe")
+
+      cy.contains("button", "Create Customer").click()
+
+      // Button should show loading text and be disabled
+      cy.contains("button", "Creating...").should("be.visible").and("be.disabled")
+    })
+  })
+
+  // ── Form reset after success ──
+
+  it("should reset the form after successful submission", () => {
+    cy.fixture("customers").then((data) => {
+      cy.intercept("POST", "**/api/customers", {
+        statusCode: 201,
+        body: data.customer_created,
+      }).as("createCustomer")
+    })
+
+    openCustomerDialog()
+
+    cy.get("[role='dialog']").within(() => {
+      cy.get("input[name='first_name']").type("John")
+      cy.get("input[name='last_name']").type("Doe")
+
+      cy.contains("button", "Create Customer").click()
+    })
+
+    cy.wait("@createCustomer")
+
+    // After success, re-open the dialog and verify fields are empty
+    openCustomerDialog()
+
+    cy.get("[role='dialog']").within(() => {
+      cy.get("input[name='first_name']").should("have.value", "")
+      cy.get("input[name='last_name']").should("have.value", "")
+    })
+  })
+})
diff --git a/cypress/fixtures/customers.json b/cypress/fixtures/customers.json
new file mode 100644
index 0000000..b232d94
--- /dev/null
+++ b/cypress/fixtures/customers.json
@@ -0,0 +1,47 @@
+{
+  "referral_sources": {
+    "success": true,
+    "data": {
+      "data": [
+        { "id": 1, "name": "Google" },
+        { "id": 2, "name": "Friend Referral" },
+        { "id": 3, "name": "Social Media" }
+      ]
+    }
+  },
+  "payment_terms": {
+    "success": true,
+    "data": {
+      "data": [
+        { "id": 1, "name": "Net 30" },
+        { "id": 2, "name": "Net 60" },
+        { "id": 3, "name": "Due on Receipt" }
+      ]
+    }
+  },
+  "countries": {
+    "success": true,
+    "data": [
+      { "id": 1, "name": "United Arab Emirates" },
+      { "id": 2, "name": "Saudi Arabia" },
+      { "id": 3, "name": "United States" }
+    ]
+  },
+  "states": {
+    "success": true,
+    "data": [
+      { "id": 1, "name": "Dubai" },
+      { "id": 2, "name": "Abu Dhabi" },
+      { "id": 3, "name": "Sharjah" }
+    ]
+  },
+  "customer_created": {
+    "success": true,
+    "data": {
+      "id": 101,
+      "first_name": "John",
+      "last_name": "Doe",
+      "email": "john@example.com"
+    }
+  }
+}
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
new file mode 100644
index 0000000..c1dd11e
--- /dev/null
+++ b/cypress/support/commands.ts
@@ -0,0 +1,33 @@
+/// <reference types="cypress" />
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Log in via the API and set auth cookies so the app
+       * recognises the user as authenticated.
+       */
+      login(email?: string, password?: string): Chainable<void>
+    }
+  }
+}
+
+Cypress.Commands.add("login", (email?: string, password?: string) => {
+  const userEmail = email ?? Cypress.env("TEST_USER_EMAIL") ?? "admin@admin.com"
+  const userPassword = password ?? Cypress.env("TEST_USER_PASSWORD") ?? "12345678"
+
+  cy.request({
+    method: "POST",
+    url: `${Cypress.env("API_URL") ?? "http://localhost:8000"}/api/login`,
+    body: { email: userEmail, password: userPassword },
+  }).then((response) => {
+    const { token, user } = response.body
+
+    cy.setCookie("auth_token", token, { path: "/" })
+    cy.setCookie("auth_user", encodeURIComponent(JSON.stringify(user)), {
+      path: "/",
+    })
+  })
+})
+
+export {}
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
new file mode 100644
index 0000000..b7cb303
--- /dev/null
+++ b/cypress/support/e2e.ts
@@ -0,0 +1 @@
+import "./commands"
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
new file mode 100644
index 0000000..3b29d25
--- /dev/null
+++ b/cypress/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["ES2017", "DOM"],
+    "types": ["cypress"],
+    "moduleResolution": "bundler",
+    "module": "ESNext",
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["../../*"]
+    }
+  },
+  "include": ["**/*.ts", "../support/**/*.ts"]
+}
diff --git a/lib/utils.ts b/lib/utils.ts
deleted file mode 100644
index bd0c391..0000000
--- a/lib/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
diff --git a/modules/auth/auth.actions.ts b/modules/auth/auth.actions.ts
new file mode 100644
index 0000000..c240332
--- /dev/null
+++ b/modules/auth/auth.actions.ts
@@ -0,0 +1,55 @@
+"use server"
+
+import { cookies } from "next/headers"
+import type { AuthUser } from "@repo/api"
+
+const TOKEN_COOKIE = "auth_token"
+const USER_COOKIE = "auth_user"
+const DEFAULT_EXPIRES_IN = 60 * 60 * 24 * 7 // 7 days in seconds
+
+export async function setAuthCookies(
+    token: string,
+    user: AuthUser,
+    expiresIn: number = DEFAULT_EXPIRES_IN,
+) {
+    const cookieStore = await cookies()
+    const expires = new Date(Date.now() + expiresIn * 1000)
+
+    cookieStore.set(TOKEN_COOKIE, token, {
+        expires,
+        path: "/",
+        sameSite: "strict",
+    })
+
+    cookieStore.set(USER_COOKIE, JSON.stringify(user), {
+        expires,
+        path: "/",
+        sameSite: "strict",
+    })
+}
+
+export async function clearAuthCookies() {
+    const cookieStore = await cookies()
+    cookieStore.delete(TOKEN_COOKIE)
+    cookieStore.delete(USER_COOKIE)
+}
+
+export async function getAuthCookies(): Promise<{
+    token: string | undefined
+    user: AuthUser | undefined
+}> {
+    const cookieStore = await cookies()
+    const token = cookieStore.get(TOKEN_COOKIE)?.value
+    const rawUser = cookieStore.get(USER_COOKIE)?.value
+
+    let user: AuthUser | undefined
+    if (rawUser) {
+        try {
+            user = JSON.parse(rawUser) as AuthUser
+        } catch {
+            user = undefined
+        }
+    }
+
+    return { token, user }
+}
diff --git a/modules/auth/login-form.schema.ts b/modules/auth/login-form.schema.ts
new file mode 100644
index 0000000..dbe2b80
--- /dev/null
+++ b/modules/auth/login-form.schema.ts
@@ -0,0 +1,11 @@
+import { z } from "zod"
+
+const loginFormSchema = z.object({
+  email: z.string().trim().email("Enter a valid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+})
+
+type LoginFormValues = z.infer<typeof loginFormSchema>
+
+export { loginFormSchema }
+export type { LoginFormValues }
\ No newline at end of file
diff --git a/modules/auth/login-form.tsx b/modules/auth/login-form.tsx
new file mode 100644
index 0000000..ace4b97
--- /dev/null
+++ b/modules/auth/login-form.tsx
@@ -0,0 +1,148 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Button } from "@/shared/components/ui/button"
+import { api } from '@repo/api'
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "@/shared/components/ui/card"
+import {
+    Field,
+    FieldDescription,
+    FieldError,
+    FieldGroup,
+    FieldLabel,
+} from "@/shared/components/ui/field"
+import { Input } from "@/shared/components/ui/input"
+import { useAppStore } from "@/shared/stores/app-store"
+import { useAuthStore } from "@/shared/stores/auth-store"
+import { cn } from "@/shared/lib/utils"
+import Image from "next/image"
+import { useRouter } from "next/navigation"
+
+import { loginFormSchema, type LoginFormValues } from "./login-form.schema"
+import { useMutation } from "@tanstack/react-query"
+import { Alert, AlertTitle } from "@/shared/components/ui/alert"
+import { AlertTriangle } from "lucide-react"
+
+export function LoginForm({
+    className,
+    ...props
+}: React.ComponentProps<"div">) {
+    const lastLoginEmail = useAppStore((state) => state.lastLoginEmail)
+    const setLastLoginEmail = useAppStore((state) => state.setLastLoginEmail)
+    const login = useAuthStore((state) => state.login)
+    const router = useRouter()
+    const {
+        handleSubmit,
+        register,
+        formState: { errors, },
+    } = useForm<LoginFormValues>({
+        resolver: zodResolver(loginFormSchema),
+        defaultValues: process.env.NODE_ENV === "development" ? {
+            "email": "admin@admin.com",
+            "password": "12345678"
+        } : {
+            email: lastLoginEmail,
+            password: "",
+        },
+    })
+
+    const { mutate, error, isPending: isSubmitting } = useMutation({
+        mutationFn: (values: LoginFormValues) => api.auth.login(values),
+        onSuccess: async (data) => {
+            if (data.token && data.user) {
+                await login(data.token, data.user as Parameters<typeof login>[1])
+                router.push("/")
+            }
+        },
+    })
+
+
+    async function onSubmit(values: LoginFormValues) {
+        setLastLoginEmail(values.email)
+        mutate(values)
+    }
+
+    return (
+        <div className={cn("flex flex-col gap-6", className)} {...props}>
+            <Card>
+                <CardHeader>
+                    <Image
+                        className="mx-auto mb-8 h-20 w-48"
+                        alt="Logo"
+                        src="/assets/logo.png"
+                        height={200}
+                        width={200}
+                    />
+                    <CardTitle>Login to your account</CardTitle>
+                    <CardDescription>
+                        Enter your email below to login to your account
+                    </CardDescription>
+                </CardHeader>
+                <CardContent>
+                    {error ? (
+                        <Alert variant='destructive' className="mb-4">
+                            <AlertTriangle className="me-2 h-4 w-4" />
+                            <AlertTitle>Login failed</AlertTitle>
+                            {error.message}
+                        </Alert>
+                    ) : null}
+
+                    <form onSubmit={handleSubmit(onSubmit)} noValidate>
+                        <FieldGroup>
+                            <Field>
+                                <FieldLabel htmlFor="email">Email</FieldLabel>
+                                <Input
+                                    id="email"
+                                    type="email"
+                                    placeholder="m@example.com"
+                                    aria-invalid={!!errors.email}
+                                    {...register("email")}
+                                />
+                                <FieldError errors={[errors.email]} />
+                            </Field>
+                            <Field>
+                                <div className="flex items-center">
+                                    <FieldLabel htmlFor="password">Password</FieldLabel>
+                                    <a
+                                        href="#"
+                                        className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+                                    >
+                                        Forgot your password?
+                                    </a>
+                                </div>
+                                <Input
+                                    id="password"
+                                    type="password"
+                                    aria-invalid={!!errors.password}
+                                    {...register("password")}
+                                />
+                                <FieldError errors={[errors.password]} />
+                            </Field>
+                            <Field>
+                                <Button type="submit" disabled={isSubmitting}>
+                                    {isSubmitting ? "Logging in..." : "Login"}
+                                </Button>
+
+                                {lastLoginEmail ? (
+                                    <FieldDescription className="text-center">
+                                        Last email used: {lastLoginEmail}
+                                    </FieldDescription>
+                                ) : null}
+                                {/* <FieldDescription className="text-center">
+                                    Don&apos;t have an account? <a href="#">Sign up</a>
+                                </FieldDescription> */}
+                            </Field>
+                        </FieldGroup>
+                    </form>
+                </CardContent>
+            </Card>
+        </div>
+    )
+}
diff --git a/modules/customers/customer-form.tsx b/modules/customers/customer-form.tsx
new file mode 100644
index 0000000..2779646
--- /dev/null
+++ b/modules/customers/customer-form.tsx
@@ -0,0 +1,264 @@
+"use client"
+
+import { AlertTriangle, Plus, Save } from "lucide-react"
+
+import { Button } from "@/shared/components/ui/button"
+import { Alert, AlertTitle } from "@/shared/components/ui/alert"
+import { FieldGroup } from "@/shared/components/ui/field"
+import {
+    Rhform,
+    RhfTextField,
+    RhfSelectField,
+    RhfAsyncSelectField,
+} from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+import { useResourceForm } from "@/shared/hooks/use-resource-form"
+import { useFormMutation } from "@/shared/hooks/use-form-mutation"
+import { toRelation, toId } from "@/shared/lib/utils"
+
+import {
+    customerFormSchema,
+    type CustomerFormValues,
+} from "./customer.schema"
+import { CUSTOMER_ROUTES } from "@repo/api"
+
+// ── Constants ──
+
+const SALUTATION_OPTIONS = [
+    { value: "Mr.", label: "Mr." },
+    { value: "Mrs.", label: "Mrs." },
+    { value: "Ms.", label: "Ms." },
+    { value: "Miss", label: "Miss" },
+    { value: "Dr.", label: "Dr." },
+    { value: "Prof.", label: "Prof." },
+]
+
+// ── Props ──
+
+export type CustomerFormProps = {
+    resourceId?: string | null
+    initialData?: unknown
+    onSuccess?: () => void
+}
+
+// ── Default values ──
+
+const CUSTOMER_DEFAULT_VALUES: CustomerFormValues = {
+    customer_type: null,
+    referral_source: null,
+    payment_terms: null,
+    country: null,
+    state: null,
+    salutation: "",
+    first_name: "",
+    last_name: "",
+    company_name: "",
+    email: "",
+    phone: "",
+    alternate_phone: "",
+    address_line_1: "",
+    address_line_2: "",
+    city: "",
+    zip_code: "",
+}
+
+// ── Mapping helpers ──
+
+function mapCustomerToFormValues(data: unknown): CustomerFormValues {
+    const c = (data as any)?.data ?? data ?? {}
+
+    return {
+        customer_type: toRelation(c.customer_type_id, c.customer_type_name),
+        referral_source: toRelation(c.referral_source_id, c.referral_source_name),
+        payment_terms: toRelation(c.payment_terms_id, c.payment_terms_name),
+        country: toRelation(c.country_id, c.country_name),
+        state: toRelation(c.state_id, c.state_name),
+        salutation: c.salutation || "",
+        first_name: c.first_name || "",
+        last_name: c.last_name || "",
+        company_name: c.company_name || "",
+        email: c.email || "",
+        phone: c.phone || "",
+        alternate_phone: c.alternate_phone || "",
+        address_line_1: c.address_line_1 || "",
+        address_line_2: c.address_line_2 || "",
+        city: c.city || "",
+        zip_code: c.zip_code || "",
+    }
+}
+
+function mapFormToPayload(values: CustomerFormValues) {
+    return {
+        customer_type_id: toId(values.customer_type),
+        referral_source_id: toId(values.referral_source),
+        payment_terms_id: toId(values.payment_terms),
+        country_id: toId(values.country),
+        state_id: toId(values.state),
+        salutation: values.salutation || undefined,
+        first_name: values.first_name,
+        last_name: values.last_name,
+        company_name: values.company_name || undefined,
+        email: values.email || undefined,
+        phone: values.phone || undefined,
+        alternate_phone: values.alternate_phone || undefined,
+        address_line_1: values.address_line_1 || undefined,
+        address_line_2: values.address_line_2 || undefined,
+        city: values.city || undefined,
+        zip_code: values.zip_code || undefined,
+    }
+}
+
+// ── Shared mapOption for async selects ──
+
+const mapLookupOption = (item: any) => ({
+    value: String(item.id),
+    label: item.name,
+})
+
+const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
+
+// ── Component ──
+
+export function CustomerForm({ resourceId, initialData, onSuccess }: CustomerFormProps) {
+    const api = useAuthApi()
+
+    const { form, isEditing } = useResourceForm<CustomerFormValues, any>({
+        schema: customerFormSchema,
+        defaultValues: CUSTOMER_DEFAULT_VALUES,
+        resourceId,
+        initialData,
+        initialize: (id) => api.customers.show(id),
+        queryKey: [CUSTOMER_ROUTES.BY_ID, resourceId],
+        mapToFormValues: mapCustomerToFormValues,
+    })
+
+    const { mutate, error, isPending } = useFormMutation(form, {
+        mutationFn: (values: CustomerFormValues) => {
+            const payload = mapFormToPayload(values)
+            const promise = isEditing && resourceId
+                ? api.customers.update(resourceId, payload)
+                : api.customers.create(payload)
+            toast.promise(promise, {
+                loading: isEditing ? "Updating customer..." : "Creating customer...",
+                success: isEditing ? "Customer updated successfully" : "Customer created successfully",
+                error: isEditing ? "Failed to update customer" : "Failed to create customer",
+            })
+            return promise
+        },
+        onSuccess: () => {
+            form.reset()
+            onSuccess?.()
+        },
+    })
+
+    return (
+        <Rhform form={form} onSubmit={(values) => mutate(values)}>
+            {error && (
+                <Alert variant="destructive" className="mb-4">
+                    <AlertTriangle className="me-2 h-4 w-4" />
+                    <AlertTitle>{isEditing ? "Failed to update customer" : "Failed to create customer"}</AlertTitle>
+                    {error.message}
+                </Alert>
+            )}
+
+            <FieldGroup>
+
+                {/* Basic Info */}
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfSelectField
+                        name="salutation"
+                        label="Salutation"
+                        placeholder="Select salutation"
+                        options={SALUTATION_OPTIONS}
+                    />
+                    <RhfAsyncSelectField
+                        name="customer_type"
+                        label="Customer Type"
+                        placeholder="Select customer type"
+                        queryKey={[CUSTOMER_ROUTES.CUSTOMER_TYPES]}
+                        listFn={() => api.customers.listCustomerTypes()}
+                        mapOption={mapLookupOption}
+                        {...STORE_OBJECT}
+                    />
+                </div>
+
+
+                {/* Name */}
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfTextField name="first_name" label="First Name" placeholder="John" required />
+                    <RhfTextField name="last_name" label="Last Name" placeholder="Doe" required />
+                </div>
+
+                <RhfTextField name="company_name" label="Company Name" placeholder="Doe Holdings" />
+
+                {/* Contact */}
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfTextField name="email" label="Email" placeholder="john@example.com" type="email" />
+                    <RhfTextField name="phone" label="Phone" placeholder="0501234567" type="tel" />
+                </div>
+
+                <RhfTextField name="alternate_phone" label="Alternate Phone" placeholder="0551234567" type="tel" />
+
+                {/* Relations */}
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfAsyncSelectField
+                        name="referral_source"
+                        label="Referral Source"
+                        placeholder="Select referral source"
+                        queryKey={["referral-sources"]}
+                        listFn={() => api.referralSources.list()}
+                        mapOption={mapLookupOption}
+                        {...STORE_OBJECT}
+                    />
+                    <RhfAsyncSelectField
+                        name="payment_terms"
+                        label="Payment Terms"
+                        placeholder="Select payment terms"
+                        queryKey={["payment-terms"]}
+                        listFn={() => api.paymentTerms.list()}
+                        mapOption={mapLookupOption}
+                        {...STORE_OBJECT}
+                    />
+                </div>
+
+                {/* Address */}
+                <RhfTextField name="address_line_1" label="Address Line 1" placeholder="Street 10" />
+                <RhfTextField name="address_line_2" label="Address Line 2" placeholder="Near Central Plaza" />
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfAsyncSelectField
+                        name="country"
+                        label="Country"
+                        placeholder="Select country"
+                        queryKey={["countries"]}
+                        listFn={() => api.geo.countries()}
+                        mapOption={mapLookupOption}
+                        {...STORE_OBJECT}
+                    />
+                    <RhfAsyncSelectField
+                        name="state"
+                        label="State"
+                        placeholder="Select state"
+                        queryKey={["states"]}
+                        listFn={() => api.geo.states()}
+                        mapOption={mapLookupOption}
+                        {...STORE_OBJECT}
+                    />
+                </div>
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfTextField name="city" label="City" placeholder="Dubai" />
+                    <RhfTextField name="zip_code" label="Zip Code" placeholder="00000" />
+                </div>
+
+                <Button type="submit" variant="default" disabled={isPending}>
+                    {isEditing ? <Save /> : <Plus />}
+                    {isPending
+                        ? (isEditing ? "Updating..." : "Creating...")
+                        : (isEditing ? "Update Customer" : "Create Customer")}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}
\ No newline at end of file
diff --git a/modules/customers/customer.schema.ts b/modules/customers/customer.schema.ts
new file mode 100644
index 0000000..b17b582
--- /dev/null
+++ b/modules/customers/customer.schema.ts
@@ -0,0 +1,44 @@
+import { z } from "zod"
+
+/**
+ * Reusable schema for relation/lookup fields stored as `{ value, label }` objects.
+ * Use `.nullable()` when the field is optional but explicitly clearable.
+ */
+const relationFieldSchema = z
+    .object({ value: z.string(), label: z.string() })
+    .nullable()
+
+type RelationField = z.infer<typeof relationFieldSchema>
+
+const customerFormSchema = z.object({
+    // ── Relations (stored as objects, mapped to IDs on submit) ──
+    customer_type: relationFieldSchema,
+    referral_source: relationFieldSchema,
+    payment_terms: relationFieldSchema,
+    country: relationFieldSchema,
+    state: relationFieldSchema,
+
+    // ── Basic info ──
+    salutation: z.string().optional(),
+    first_name: z.string().min(1, "First name is required"),
+    last_name: z.string().min(1, "Last name is required"),
+    company_name: z.string().optional(),
+
+    // ── Contact ──
+    email: z
+        .union([z.string().email("Enter a valid email address"), z.literal("")])
+        .optional(),
+    phone: z.string().optional(),
+    alternate_phone: z.string().optional(),
+
+    // ── Address ──
+    address_line_1: z.string().optional(),
+    address_line_2: z.string().optional(),
+    city: z.string().optional(),
+    zip_code: z.string().optional(),
+})
+
+type CustomerFormValues = z.infer<typeof customerFormSchema>
+
+export { customerFormSchema, relationFieldSchema }
+export type { CustomerFormValues, RelationField }
\ No newline at end of file
diff --git a/modules/settings/shop-type/shop-type-form.tsx b/modules/settings/shop-type/shop-type-form.tsx
new file mode 100644
index 0000000..328fc1b
--- /dev/null
+++ b/modules/settings/shop-type/shop-type-form.tsx
@@ -0,0 +1,157 @@
+"use client"
+
+import { AlertTriangle, Plus, Save } from "lucide-react"
+
+import { Button } from "@/shared/components/ui/button"
+import { Alert, AlertTitle } from "@/shared/components/ui/alert"
+import { FieldGroup } from "@/shared/components/ui/field"
+import {
+    Rhform,
+    RhfTextField,
+    RhfTextareaField,
+    RhfCheckboxField,
+    RhfFileField,
+} from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+import { useResourceForm } from "@/shared/hooks/use-resource-form"
+import { useFormMutation } from "@/shared/hooks/use-form-mutation"
+
+import { shopTypeFormSchema, type ShopTypeFormValues } from "./shop-type.schema"
+import { SHOP_TYPE_ROUTES } from "@repo/api"
+
+// ── Props ──
+
+export type ShopTypeFormProps = {
+    resourceId?: string | null
+    initialData?: unknown
+    onSuccess?: () => void
+}
+
+// ── Default values ──
+
+const DEFAULT_VALUES: ShopTypeFormValues = {
+    title: "",
+    shop_type: "",
+    note: "",
+    is_default: false,
+    inspection: null,
+    image: null,
+}
+
+// ── Mapping helpers ──
+
+function mapToFormValues(data: unknown): ShopTypeFormValues {
+    const d = (data as any)?.data ?? data ?? {}
+
+    return {
+        title: d.title || "",
+        shop_type: d.shop_type || "",
+        note: d.note || "",
+        is_default: d.is_default ?? false,
+        // File fields cannot be pre-filled from URL strings
+        inspection: null,
+        image: null,
+    }
+}
+
+function mapFormToPayload(values: ShopTypeFormValues) {
+    return {
+        title: values.title,
+        shop_type: values.shop_type || undefined,
+        note: values.note || undefined,
+        is_default: values.is_default,
+        inspection: values.inspection ?? undefined,
+        image: values.image ?? undefined,
+    }
+}
+
+// ── Component ──
+
+export function ShopTypeForm({ resourceId, initialData, onSuccess }: ShopTypeFormProps) {
+    const api = useAuthApi()
+
+    const { form, isEditing } = useResourceForm<ShopTypeFormValues, any>({
+        schema: shopTypeFormSchema,
+        defaultValues: DEFAULT_VALUES,
+        resourceId,
+        initialData,
+        mapToFormValues,
+    })
+
+    const { mutate, error, isPending } = useFormMutation(form, {
+        mutationFn: (values: ShopTypeFormValues) => {
+            const payload = mapFormToPayload(values)
+            const promise = isEditing && resourceId
+                ? api.shopTypes.update(resourceId, payload)
+                : api.shopTypes.create({ ...payload, title: values.title })
+            toast.promise(promise, {
+                loading: isEditing ? "Updating shop type..." : "Creating shop type...",
+                success: isEditing ? "Shop type updated successfully" : "Shop type created successfully",
+                error: isEditing ? "Failed to update shop type" : "Failed to create shop type",
+            })
+            return promise
+        },
+        onSuccess: () => {
+            form.reset()
+            onSuccess?.()
+        },
+    })
+
+    return (
+        <Rhform form={form} onSubmit={(values) => mutate(values)}>
+            {error && (
+                <Alert variant="destructive" className="mb-4">
+                    <AlertTriangle className="me-2 h-4 w-4" />
+                    <AlertTitle>
+                        {isEditing ? "Failed to update shop type" : "Failed to create shop type"}
+                    </AlertTitle>
+                    {error.message}
+                </Alert>
+            )}
+
+            <FieldGroup>
+                <RhfTextField
+                    name="title"
+                    label="Title"
+                    placeholder="e.g. Main Workshop"
+                    required
+                />
+                <RhfTextField
+                    name="shop_type"
+                    label="Type"
+                    placeholder="e.g. Car, Truck"
+                />
+                <RhfTextareaField
+                    name="note"
+                    label="Note"
+                    placeholder="Optional description"
+                    rows={3}
+                />
+                <RhfCheckboxField
+                    name="is_default"
+                    label="Set as default"
+                />
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfFileField
+                        name="inspection"
+                        label="Inspection Template"
+                        accept=".pdf,.doc,.docx"
+                    />
+                    <RhfFileField
+                        name="image"
+                        label="Image"
+                        accept="image/*"
+                    />
+                </div>
+
+                <Button type="submit" variant="default" disabled={isPending}>
+                    {isEditing ? <Save /> : <Plus />}
+                    {isPending
+                        ? (isEditing ? "Updating..." : "Creating...")
+                        : (isEditing ? "Update Shop Type" : "Create Shop Type")}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}
diff --git a/modules/settings/shop-type/shop-type.schema.ts b/modules/settings/shop-type/shop-type.schema.ts
new file mode 100644
index 0000000..19c5690
--- /dev/null
+++ b/modules/settings/shop-type/shop-type.schema.ts
@@ -0,0 +1,19 @@
+import { z } from "zod"
+
+export const shopTypeFormSchema = z.object({
+    title: z.string().min(1, "Title is required"),
+    shop_type: z.string().optional(),
+    note: z.string().optional(),
+    is_default: z.boolean().optional(),
+    inspection: z.any().optional(),
+    image: z.any().optional(),
+})
+
+export type ShopTypeFormValues = {
+    title: string
+    shop_type?: string
+    note?: string
+    is_default?: boolean
+    inspection?: File | null
+    image?: File | null
+}
diff --git a/modules/vehicles/inline-forms/body-type-inline-form.tsx b/modules/vehicles/inline-forms/body-type-inline-form.tsx
new file mode 100644
index 0000000..4d0507c
--- /dev/null
+++ b/modules/vehicles/inline-forms/body-type-inline-form.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import { z } from "zod"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Plus } from "lucide-react"
+import { Button } from "@/shared/components/ui/button"
+import { FieldGroup } from "@/shared/components/ui/field"
+import { Rhform, RhfTextField, type InlineCreateFormProps } from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+
+const schema = z.object({
+    title: z.string().min(1, "Title is required"),
+})
+
+type FormValues = z.infer<typeof schema>
+
+export function BodyTypeInlineForm({ onSuccess }: InlineCreateFormProps) {
+    const api = useAuthApi()
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(schema),
+        defaultValues: { title: "" },
+    })
+
+    const handleSubmit = async (values: FormValues) => {
+        try {
+            const result = await api.vehicleAttributes.createBodyType({ title: values.title })
+            toast.success("Body type created")
+            form.reset()
+            const item = (result as any)?.data ?? result
+            onSuccess({ value: String(item.id), label: item.title ?? String(item.id) })
+        } catch {
+            toast.error("Failed to create body type")
+        }
+    }
+
+    return (
+        <Rhform form={form} onSubmit={handleSubmit}>
+            <FieldGroup>
+                <RhfTextField
+                    name="title"
+                    label="Title"
+                    placeholder="e.g. Sedan"
+                    required
+                />
+                <Button type="submit" disabled={form.formState.isSubmitting}>
+                    <Plus />
+                    {form.formState.isSubmitting ? "Creating..." : "Create Body Type"}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}
diff --git a/modules/vehicles/inline-forms/color-inline-form.tsx b/modules/vehicles/inline-forms/color-inline-form.tsx
new file mode 100644
index 0000000..1e97e71
--- /dev/null
+++ b/modules/vehicles/inline-forms/color-inline-form.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import { z } from "zod"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Plus } from "lucide-react"
+import { Button } from "@/shared/components/ui/button"
+import { FieldGroup } from "@/shared/components/ui/field"
+import { Rhform, RhfTextField, type InlineCreateFormProps } from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+
+const schema = z.object({
+    title: z.string().min(1, "Title is required"),
+})
+
+type FormValues = z.infer<typeof schema>
+
+export function ColorInlineForm({ onSuccess }: InlineCreateFormProps) {
+    const api = useAuthApi()
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(schema),
+        defaultValues: { title: "" },
+    })
+
+    const handleSubmit = async (values: FormValues) => {
+        try {
+            const result = await api.vehicleAttributes.createColor({ title: values.title })
+            toast.success("Color created")
+            form.reset()
+            const item = (result as any)?.data ?? result
+            onSuccess({ value: String(item.id), label: item.title ?? String(item.id) })
+        } catch {
+            toast.error("Failed to create color")
+        }
+    }
+
+    return (
+        <Rhform form={form} onSubmit={handleSubmit}>
+            <FieldGroup>
+                <RhfTextField
+                    name="title"
+                    label="Title"
+                    placeholder="e.g. Black"
+                    required
+                />
+                <Button type="submit" disabled={form.formState.isSubmitting}>
+                    <Plus />
+                    {form.formState.isSubmitting ? "Creating..." : "Create Color"}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}
diff --git a/modules/vehicles/inline-forms/fuel-type-inline-form.tsx b/modules/vehicles/inline-forms/fuel-type-inline-form.tsx
new file mode 100644
index 0000000..0f3cc0c
--- /dev/null
+++ b/modules/vehicles/inline-forms/fuel-type-inline-form.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import { z } from "zod"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Plus } from "lucide-react"
+import { Button } from "@/shared/components/ui/button"
+import { FieldGroup } from "@/shared/components/ui/field"
+import { Rhform, RhfTextField, type InlineCreateFormProps } from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+
+const schema = z.object({
+    title: z.string().min(1, "Title is required"),
+})
+
+type FormValues = z.infer<typeof schema>
+
+export function FuelTypeInlineForm({ onSuccess }: InlineCreateFormProps) {
+    const api = useAuthApi()
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(schema),
+        defaultValues: { title: "" },
+    })
+
+    const handleSubmit = async (values: FormValues) => {
+        try {
+            const result = await api.vehicleAttributes.createFuelType({ title: values.title })
+            toast.success("Fuel type created")
+            form.reset()
+            const item = (result as any)?.data ?? result
+            onSuccess({ value: String(item.id), label: item.title ?? String(item.id) })
+        } catch {
+            toast.error("Failed to create fuel type")
+        }
+    }
+
+    return (
+        <Rhform form={form} onSubmit={handleSubmit}>
+            <FieldGroup>
+                <RhfTextField
+                    name="title"
+                    label="Title"
+                    placeholder="e.g. Gasoline"
+                    required
+                />
+                <Button type="submit" disabled={form.formState.isSubmitting}>
+                    <Plus />
+                    {form.formState.isSubmitting ? "Creating..." : "Create Fuel Type"}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}
diff --git a/modules/vehicles/inline-forms/shop-type-inline-form.tsx b/modules/vehicles/inline-forms/shop-type-inline-form.tsx
new file mode 100644
index 0000000..6cdbac4
--- /dev/null
+++ b/modules/vehicles/inline-forms/shop-type-inline-form.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import { z } from "zod"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Plus } from "lucide-react"
+import { Button } from "@/shared/components/ui/button"
+import { FieldGroup } from "@/shared/components/ui/field"
+import {
+    Rhform,
+    RhfTextField,
+    RhfTextareaField,
+    RhfCheckboxField,
+    RhfFileField,
+    type InlineCreateFormProps,
+} from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+
+const schema = z.object({
+    title: z.string().min(1, "Title is required"),
+    shop_type: z.string().optional(),
+    note: z.string().optional(),
+    is_default: z.boolean().optional(),
+    inspection: z.any().optional(),
+    image: z.any().optional(),
+})
+
+type FormValues = {
+    title: string
+    shop_type?: string
+    note?: string
+    is_default?: boolean
+    inspection?: File | null
+    image?: File | null
+}
+
+export function ShopTypeInlineForm({ onSuccess }: InlineCreateFormProps) {
+    const api = useAuthApi()
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(schema),
+        defaultValues: {
+            title: "",
+            shop_type: "",
+            note: "",
+            is_default: false,
+            inspection: null,
+            image: null,
+        },
+    })
+
+    const handleSubmit = async (values: FormValues) => {
+        try {
+            const result = await api.shopTypes.create({
+                title: values.title,
+                shop_type: values.shop_type || undefined,
+                note: values.note || undefined,
+                is_default: values.is_default,
+                inspection: values.inspection ?? undefined,
+                image: values.image ?? undefined,
+            })
+            toast.success("Shop type created")
+            form.reset()
+            const item = (result as any)?.data ?? result
+            onSuccess({ value: String(item.id), label: item.title ?? String(item.id) })
+        } catch {
+            toast.error("Failed to create shop type")
+        }
+    }
+
+    return (
+        <Rhform form={form} onSubmit={handleSubmit}>
+            <FieldGroup>
+                <RhfTextField
+                    name="title"
+                    label="Title"
+                    placeholder="e.g. Main Workshop"
+                    required
+                />
+                <RhfTextField
+                    name="shop_type"
+                    label="Type"
+                    placeholder="e.g. Car, Truck"
+                />
+                <RhfTextareaField
+                    name="note"
+                    label="Note"
+                    placeholder="Optional description"
+                    rows={3}
+                />
+                <RhfCheckboxField
+                    name="is_default"
+                    label="Set as default"
+                />
+                <RhfFileField
+                    name="inspection"
+                    label="Inspection Template"
+                    accept=".pdf,.doc,.docx"
+                />
+                <RhfFileField
+                    name="image"
+                    label="Image"
+                    accept="image/*"
+                />
+                <Button type="submit" disabled={form.formState.isSubmitting}>
+                    <Plus />
+                    {form.formState.isSubmitting ? "Creating..." : "Create Shop Type"}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}
+
diff --git a/modules/vehicles/inline-forms/transmission-inline-form.tsx b/modules/vehicles/inline-forms/transmission-inline-form.tsx
new file mode 100644
index 0000000..f21c98b
--- /dev/null
+++ b/modules/vehicles/inline-forms/transmission-inline-form.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import { z } from "zod"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Plus } from "lucide-react"
+import { Button } from "@/shared/components/ui/button"
+import { FieldGroup } from "@/shared/components/ui/field"
+import { Rhform, RhfTextField, type InlineCreateFormProps } from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+
+const schema = z.object({
+    title: z.string().min(1, "Title is required"),
+})
+
+type FormValues = z.infer<typeof schema>
+
+export function TransmissionInlineForm({ onSuccess }: InlineCreateFormProps) {
+    const api = useAuthApi()
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(schema),
+        defaultValues: { title: "" },
+    })
+
+    const handleSubmit = async (values: FormValues) => {
+        try {
+            const result = await api.vehicleAttributes.createTransmission({ title: values.title })
+            toast.success("Transmission created")
+            form.reset()
+            const item = (result as any)?.data ?? result
+            onSuccess({ value: String(item.id), label: item.title ?? String(item.id) })
+        } catch {
+            toast.error("Failed to create transmission")
+        }
+    }
+
+    return (
+        <Rhform form={form} onSubmit={handleSubmit}>
+            <FieldGroup>
+                <RhfTextField
+                    name="title"
+                    label="Title"
+                    placeholder="e.g. Automatic"
+                    required
+                />
+                <Button type="submit" disabled={form.formState.isSubmitting}>
+                    <Plus />
+                    {form.formState.isSubmitting ? "Creating..." : "Create Transmission"}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}
diff --git a/modules/vehicles/vehicle-form.tsx b/modules/vehicles/vehicle-form.tsx
new file mode 100644
index 0000000..607bcc0
--- /dev/null
+++ b/modules/vehicles/vehicle-form.tsx
@@ -0,0 +1,267 @@
+"use client"
+
+import { AlertTriangle, Plus, Save } from "lucide-react"
+
+import { Button } from "@/shared/components/ui/button"
+import { Alert, AlertTitle } from "@/shared/components/ui/alert"
+import { FieldGroup } from "@/shared/components/ui/field"
+import {
+    Rhform,
+    RhfTextField,
+    RhfTextareaField,
+    RhfAsyncSelectField,
+} from "@/shared/components/form"
+import { ShopTypeInlineForm } from "./inline-forms/shop-type-inline-form"
+import { BodyTypeInlineForm } from "./inline-forms/body-type-inline-form"
+import { FuelTypeInlineForm } from "./inline-forms/fuel-type-inline-form"
+import { TransmissionInlineForm } from "./inline-forms/transmission-inline-form"
+import { ColorInlineForm } from "./inline-forms/color-inline-form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+import { useResourceForm } from "@/shared/hooks/use-resource-form"
+import { useFormMutation } from "@/shared/hooks/use-form-mutation"
+import { toRelation, toId } from "@/shared/lib/utils"
+
+import { vehicleFormSchema, type VehicleFormValues } from "./vehicle.schema"
+import { VEHICLE_ROUTES } from "@repo/api"
+
+// ── Props ──
+
+export type VehicleFormProps = {
+    resourceId?: string | null
+    initialData?: unknown
+    onSuccess?: () => void
+}
+
+// ── Default values ──
+
+const DEFAULT_VALUES: VehicleFormValues = {
+    shop_type: null,
+    vehicle_body_type: null,
+    vehicle_fuel_type: null,
+    vehicle_transmission: null,
+    vehicle_color: null,
+    make: "",
+    model: "",
+    year: "",
+    sub_model: "",
+    license_plate: "",
+    vin_number: "",
+    engine_size: "",
+    drivetrain: "",
+    mileage: "",
+    owners_number: "",
+    note: "",
+}
+
+// ── Mapping helpers ──
+
+const mapLookupOption = (item: any) => ({
+    value: String(item.id),
+    label: item.name ?? item.title ?? String(item.id),
+})
+
+const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
+
+function mapToFormValues(data: unknown): VehicleFormValues {
+    const d = (data as any)?.data ?? data ?? {}
+
+    return {
+        shop_type: toRelation(d.shop_type_id, d.shop_type?.title),
+        vehicle_body_type: toRelation(d.vehicle_body_type_id, d.vehicle_body_type?.title),
+        vehicle_fuel_type: toRelation(d.vehicle_fuel_type_id, d.vehicle_fuel_type?.title),
+        vehicle_transmission: toRelation(d.vehicle_transmission_id, d.vehicle_transmission?.title),
+        vehicle_color: toRelation(d.vehicle_color_id, d.vehicle_color?.title),
+        make: d.make || "",
+        model: d.model || "",
+        year: d.year || "",
+        sub_model: d.sub_model || "",
+        license_plate: d.license_plate || "",
+        vin_number: d.vin_number || "",
+        engine_size: d.engine_size || "",
+        drivetrain: d.drivetrain || "",
+        mileage: d.mileage || "",
+        owners_number: d.owners_number || "",
+        note: d.note || "",
+    }
+}
+
+function mapCreatePayload(values: VehicleFormValues) {
+    return {
+        shop_type_id: toId(values.shop_type),
+        vehicle_body_type_id: toId(values.vehicle_body_type),
+        vehicle_fuel_type_id: toId(values.vehicle_fuel_type),
+        vehicle_transmission_id: toId(values.vehicle_transmission),
+        vehicle_color_id: toId(values.vehicle_color),
+        make: values.make,
+        model: values.model,
+        year: values.year,
+        sub_model: values.sub_model || undefined,
+        license_plate: values.license_plate || undefined,
+        vin_number: values.vin_number || undefined,
+        engine_size: values.engine_size || undefined,
+        drivetrain: values.drivetrain || undefined,
+        mileage: values.mileage || undefined,
+        owners_number: values.owners_number || undefined,
+        note: values.note || undefined,
+    }
+}
+
+function mapUpdatePayload(values: VehicleFormValues) {
+    return {
+        mileage: values.mileage || undefined,
+        license_plate: values.license_plate || undefined,
+    }
+}
+
+// ── Component ──
+
+export function VehicleForm({ resourceId, initialData, onSuccess }: VehicleFormProps) {
+    const api = useAuthApi()
+
+    const { form, isEditing } = useResourceForm<VehicleFormValues, any>({
+        schema: vehicleFormSchema,
+        defaultValues: DEFAULT_VALUES,
+        resourceId,
+        initialData,
+        mapToFormValues,
+    })
+
+    const { mutate, error, isPending } = useFormMutation(form, {
+        mutationFn: (values: VehicleFormValues) => {
+            const promise = isEditing && resourceId
+                ? api.vehicles.update(resourceId, mapUpdatePayload(values))
+                : api.vehicles.create(mapCreatePayload(values))
+            toast.promise(promise, {
+                loading: isEditing ? "Updating vehicle..." : "Creating vehicle...",
+                success: isEditing ? "Vehicle updated successfully" : "Vehicle created successfully",
+                error: isEditing ? "Failed to update vehicle" : "Failed to create vehicle",
+            })
+            return promise
+        },
+        onSuccess: () => {
+            form.reset()
+            onSuccess?.()
+        },
+    })
+
+    return (
+        <Rhform form={form} onSubmit={(values) => mutate(values)}>
+            {error && (
+                <Alert variant="destructive" className="mb-4">
+                    <AlertTriangle className="me-2 h-4 w-4" />
+                    <AlertTitle>
+                        {isEditing ? "Failed to update vehicle" : "Failed to create vehicle"}
+                    </AlertTitle>
+                    {error.message}
+                </Alert>
+            )}
+
+            <FieldGroup>
+                {!isEditing && (
+                    <>
+                        {/* Vehicle identity */}
+                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                            <RhfTextField name="make" label="Make" placeholder="e.g. Toyota" required />
+                            <RhfTextField name="model" label="Model" placeholder="e.g. Camry" required />
+                            <RhfTextField name="year" label="Year" placeholder="e.g. 2024" required />
+                        </div>
+
+                        <RhfTextField name="sub_model" label="Sub Model" placeholder="e.g. LE" />
+
+                        {/* Associations */}
+                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                            <RhfAsyncSelectField
+                                name="shop_type"
+                                label="Shop Type"
+                                placeholder="Select shop type"
+                                queryKey={["shop-types"]}
+                                listFn={() => api.shopTypes.list()}
+                                mapOption={mapLookupOption}
+                                createForm={(props) => <ShopTypeInlineForm {...props} />}
+                                createLabel="Shop Type"
+                                {...STORE_OBJECT}
+                            />
+                            <RhfAsyncSelectField
+                                name="vehicle_body_type"
+                                label="Body Type"
+                                placeholder="Select body type"
+                                queryKey={["vehicle-body-types"]}
+                                listFn={() => api.vehicleAttributes.listBodyTypes()}
+                                mapOption={mapLookupOption}
+                                createForm={(props) => <BodyTypeInlineForm {...props} />}
+                                createLabel="Body Type"
+                                {...STORE_OBJECT}
+                            />
+                        </div>
+
+                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                            <RhfAsyncSelectField
+                                name="vehicle_fuel_type"
+                                label="Fuel Type"
+                                placeholder="Select fuel type"
+                                queryKey={["vehicle-fuel-types"]}
+                                listFn={() => api.vehicleAttributes.listFuelTypes()}
+                                mapOption={mapLookupOption}
+                                createForm={(props) => <FuelTypeInlineForm {...props} />}
+                                createLabel="Fuel Type"
+                                {...STORE_OBJECT}
+                            />
+                            <RhfAsyncSelectField
+                                name="vehicle_transmission"
+                                label="Transmission"
+                                placeholder="Select transmission"
+                                queryKey={["vehicle-transmissions"]}
+                                listFn={() => api.vehicleAttributes.listTransmissions()}
+                                mapOption={mapLookupOption}
+                                createForm={(props) => <TransmissionInlineForm {...props} />}
+                                createLabel="Transmission"
+                                {...STORE_OBJECT}
+                            />
+                        </div>
+
+                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                            <RhfAsyncSelectField
+                                name="vehicle_color"
+                                label="Color"
+                                placeholder="Select color"
+                                queryKey={["vehicle-colors"]}
+                                listFn={() => api.vehicleAttributes.listColors()}
+                                mapOption={mapLookupOption}
+                                createForm={(props) => <ColorInlineForm {...props} />}
+                                createLabel="Color"
+                                {...STORE_OBJECT}
+                            />
+                            <RhfTextField name="vin_number" label="VIN Number" placeholder="e.g. 1HGBH41JXMN109186" />
+                        </div>
+
+                        {/* Technical specs */}
+                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                            <RhfTextField name="engine_size" label="Engine Size" placeholder="e.g. 2.5L" />
+                            <RhfTextField name="drivetrain" label="Drivetrain" placeholder="e.g. FWD" />
+                        </div>
+
+                        <RhfTextField name="owners_number" label="Number of Owners" placeholder="e.g. 1" />
+                    </>
+                )}
+
+                {/* Editable in both create and update */}
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfTextField name="license_plate" label="License Plate" placeholder="e.g. ABC-123" />
+                    <RhfTextField name="mileage" label="Mileage" placeholder="e.g. 10000" />
+                </div>
+
+                {!isEditing && (
+                    <RhfTextareaField name="note" label="Notes" rows={3} />
+                )}
+
+                <Button type="submit" variant="default" disabled={isPending}>
+                    {isEditing ? <Save /> : <Plus />}
+                    {isPending
+                        ? (isEditing ? "Updating..." : "Creating...")
+                        : (isEditing ? "Update Vehicle" : "Create Vehicle")}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}
diff --git a/modules/vehicles/vehicle.schema.ts b/modules/vehicles/vehicle.schema.ts
new file mode 100644
index 0000000..343acda
--- /dev/null
+++ b/modules/vehicles/vehicle.schema.ts
@@ -0,0 +1,35 @@
+import { z } from "zod"
+
+export const relationFieldSchema = z
+    .object({ value: z.string(), label: z.string() })
+    .nullable()
+
+export const vehicleFormSchema = z.object({
+    // ── Relations ──
+    shop_type: relationFieldSchema,
+    vehicle_body_type: relationFieldSchema,
+    vehicle_fuel_type: relationFieldSchema,
+    vehicle_transmission: relationFieldSchema,
+    vehicle_color: relationFieldSchema,
+
+    // ── Vehicle identity ──
+    make: z.string().optional(),
+    model: z.string().optional(),
+    year: z.string().optional(),
+    sub_model: z.string().optional(),
+
+    // ── License & identifiers ──
+    license_plate: z.string().optional(),
+    vin_number: z.string().optional(),
+
+    // ── Technical specs ──
+    engine_size: z.string().optional(),
+    drivetrain: z.string().optional(),
+    mileage: z.string().optional(),
+    owners_number: z.string().optional(),
+
+    // ── Notes ──
+    note: z.string().optional(),
+})
+
+export type VehicleFormValues = z.infer<typeof vehicleFormSchema>
diff --git a/package.json b/package.json
index 49f1d52..4b225df 100644
--- a/package.json
+++ b/package.json
@@ -4,25 +4,47 @@
   "type": "module",
   "private": true,
   "scripts": {
+    "predev": "pnpm --filter @repo/api run generate",
     "dev": "next dev --turbopack",
+    "prebuild": "pnpm --filter @repo/api run generate",
     "build": "next build",
     "start": "next start",
     "lint": "eslint",
     "format": "prettier --write \"**/*.{ts,tsx}\"",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "test:e2e": "cypress run"
   },
   "dependencies": {
+    "@base-ui/react": "^1.3.0",
+    "@hookform/resolvers": "^5.2.2",
+    "@repo/api": "workspace:*",
+    "@tanstack/react-query": "^5.95.2",
+    "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
     "lucide-react": "^0.577.0",
     "next": "16.1.7",
     "next-themes": "^0.4.6",
+    "nuqs": "^2.8.9",
     "radix-ui": "^1.4.3",
     "react": "^19.2.4",
+    "react-day-picker": "^9.14.0",
     "react-dom": "^19.2.4",
-    "shadcn": "^4.1.0",
+    "react-hook-form": "^7.72.0",
+    "react-resizable-panels": "^4.7.5",
+    "recharts": "3.8.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
-    "tw-animate-css": "^1.4.0"
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2",
+    "zod": "^4.3.6",
+    "zustand": "^5.0.12"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
@@ -30,11 +52,13 @@
     "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "cypress": "^15.13.0",
     "eslint": "^9.39.4",
     "eslint-config-next": "16.1.7",
     "postcss": "^8",
     "prettier": "^3.8.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
+    "shadcn": "^4.1.0",
     "tailwindcss": "^4.2.1",
     "typescript": "^5.9.3"
   }
diff --git a/public/assets/logo.png b/public/assets/logo.png
new file mode 100644
index 0000000..c20846b
Binary files /dev/null and b/public/assets/logo.png differ
diff --git a/shared/api.ts b/shared/api.ts
new file mode 100644
index 0000000..8b7b2c6
--- /dev/null
+++ b/shared/api.ts
@@ -0,0 +1,12 @@
+import { createApi, } from "@repo/api";
+import { useAuthStore } from "./stores/auth-store";
+import { getAuthCookies } from "@/modules/auth/auth.actions";
+
+export const getAuthApi = async () => {
+    const {  token } = await getAuthCookies();
+    console.log(`Auth Token: ${token}`);
+    const api = createApi({ headers: token ? { Authorization: `Bearer ${token}` } : undefined });
+    return api;
+}
+
+
diff --git a/components/.gitkeep b/shared/components/.gitkeep
similarity index 100%
rename from components/.gitkeep
rename to shared/components/.gitkeep
diff --git a/shared/components/confirm-dialog.tsx b/shared/components/confirm-dialog.tsx
new file mode 100644
index 0000000..87b04ea
--- /dev/null
+++ b/shared/components/confirm-dialog.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import { create } from "zustand"
+import { Trash2 } from "lucide-react"
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogMedia,
+    AlertDialogTitle,
+} from "@/shared/components/ui/alert-dialog"
+
+// ── Types ──
+
+export type ConfirmOptions = {
+    title?: string
+    description?: string
+    confirmLabel?: string
+    cancelLabel?: string
+    variant?: "destructive" | "default"
+}
+
+type ConfirmStore = {
+    open: boolean
+    options: ConfirmOptions
+    resolve: ((value: boolean) => void) | null
+    _show: (options: ConfirmOptions) => Promise<boolean>
+    _close: (confirmed: boolean) => void
+}
+
+// ── Store ──
+
+const useConfirmStore = create<ConfirmStore>((set, get) => ({
+    open: false,
+    options: {},
+    resolve: null,
+    _show: (options) =>
+        new Promise<boolean>((resolve) => {
+            set({ open: true, options, resolve })
+        }),
+    _close: (confirmed) => {
+        const { resolve } = get()
+        resolve?.(confirmed)
+        set({ open: false, resolve: null })
+    },
+}))
+
+// ── Imperative API (usage: `await confirm({ ... })`) ──
+
+export function confirm(options: ConfirmOptions = {}) {
+    if (process.env.NODE_ENV === "development") {
+        const state = useConfirmStore.getState()
+        if (state.open) {
+            console.warn("[ConfirmDialog] A confirm dialog is already open. Nested confirms are not supported.")
+        }
+        // Detect missing <ConfirmDialog /> mount: if `resolve` is never set after a tick, the dialog component is not mounted.
+        const result = state._show(options)
+        setTimeout(() => {
+            const current = useConfirmStore.getState()
+            if (current.open && current.resolve === null) {
+                console.warn(
+                    "[ConfirmDialog] confirm() was called but <ConfirmDialog /> does not appear to be mounted. " +
+                    "Make sure <ConfirmDialog /> is rendered in your root layout.",
+                )
+            }
+        }, 100)
+        return result
+    }
+    return useConfirmStore.getState()._show(options)
+}
+
+// ── Dialog component (mount once in the root layout) ──
+
+export function ConfirmDialog() {
+    const { open, options, _close } = useConfirmStore()
+
+    const isDestructive = options.variant === "destructive"
+
+    return (
+        <AlertDialog
+            open={open}
+            onOpenChange={(v) => {
+                if (!v) _close(false)
+            }}
+        >
+            <AlertDialogContent size="sm">
+                <AlertDialogHeader>
+                    {isDestructive && (
+                        <AlertDialogMedia>
+                            <Trash2 className="text-destructive" />
+                        </AlertDialogMedia>
+                    )}
+                    <AlertDialogTitle>
+                        {options.title ?? "Are you sure?"}
+                    </AlertDialogTitle>
+                    {options.description && (
+                        <AlertDialogDescription>
+                            {options.description}
+                        </AlertDialogDescription>
+                    )}
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel onClick={() => _close(false)}>
+                        {options.cancelLabel ?? "Cancel"}
+                    </AlertDialogCancel>
+                    <AlertDialogAction
+                        variant={isDestructive ? "destructive" : "default"}
+                        onClick={() => _close(true)}
+                    >
+                        {options.confirmLabel ?? "Confirm"}
+                    </AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    )
+}
diff --git a/shared/components/form-dialog.tsx b/shared/components/form-dialog.tsx
new file mode 100644
index 0000000..f62feb5
--- /dev/null
+++ b/shared/components/form-dialog.tsx
@@ -0,0 +1,87 @@
+import React from 'react'
+import { useQueryStates, parseAsBoolean, parseAsString } from 'nuqs'
+import { Button } from '@/shared/components/ui/button'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/shared/components/ui/dialog'
+import { ScrollArea } from '@/shared/components/ui/scroll-area'
+import { Plus } from 'lucide-react'
+
+export const formDialogParams = {
+    dialog: parseAsBoolean.withDefault(false),
+    resourceId: parseAsString,
+}
+
+export function useFormDialog(paramKey?: string) {
+    // Default (no paramKey) uses the standard `dialog` and `resourceId` params
+    const defaultState = useQueryStates(formDialogParams)
+
+    // When a paramKey is provided, use prefixed params to avoid URL collisions
+    const prefixedState = useQueryStates({
+        [`${paramKey ?? "_"}_dialog`]: parseAsBoolean.withDefault(false),
+        [`${paramKey ?? "_"}_resourceId`]: parseAsString,
+    })
+
+    if (paramKey) {
+        const [params, setParams] = prefixedState
+        const dialogKey = `${paramKey}_dialog`
+        const resourceIdKey = `${paramKey}_resourceId`
+
+        const open = (resourceId?: string) => {
+            setParams({ [dialogKey]: true, [resourceIdKey]: resourceId ?? null })
+        }
+        const close = () => {
+            setParams({ [dialogKey]: false, [resourceIdKey]: null })
+        }
+
+        return {
+            isOpen: (params as Record<string, unknown>)[dialogKey] as boolean,
+            resourceId: (params as Record<string, unknown>)[resourceIdKey] as string | null,
+            open,
+            close,
+        }
+    }
+
+    const [params, setParams] = defaultState
+
+    const open = (resourceId?: string) => {
+        setParams({ dialog: true, resourceId: resourceId ?? null })
+    }
+    const close = () => {
+        setParams({ dialog: false, resourceId: null })
+    }
+
+    return {
+        isOpen: params.dialog,
+        resourceId: params.resourceId,
+        open,
+        close,
+    }
+}
+
+export default function FormDialog(props: {
+    children: (resourceId: string | null) => React.ReactNode
+    title: string
+    paramKey?: string
+}) {
+    const { isOpen, resourceId, open, close } = useFormDialog(props.paramKey)
+
+    return (
+        <>
+            <Button size='lg'   onClick={() => open()}>
+                <Plus />
+                {props.title}
+            </Button>
+            <Dialog open={isOpen} onOpenChange={(v) => { if (!v) close() }}>
+                <DialogContent className='min-w-xl'>
+                    <DialogHeader>
+                        <DialogTitle className='text-2xl font-bold'>
+                            {props.title}
+                        </DialogTitle>
+                    </DialogHeader>
+                    <ScrollArea className='max-h-[80vh] px-4'>
+                        {props.children(resourceId)}
+                    </ScrollArea>
+                </DialogContent>
+            </Dialog>
+        </>
+    )
+}
diff --git a/shared/components/form/controls/async-select-field.tsx b/shared/components/form/controls/async-select-field.tsx
new file mode 100644
index 0000000..f2bf0ae
--- /dev/null
+++ b/shared/components/form/controls/async-select-field.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import { useRef } from "react"
+import type { AsyncOption, BaseFieldControlProps } from "../types"
+import { Loader2 } from "lucide-react"
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxEmpty,
+} from "@/shared/components/ui/combobox"
+
+const defaultGetOptionValue = (opt: any) => opt.value
+const defaultGetOptionLabel = (opt: any) => opt.label
+function defaultGetOptionKey(opt: any): string {
+  const v = defaultGetOptionValue(opt)
+  if (typeof v === "string" || typeof v === "number") return String(v)
+  return String(opt.id ?? JSON.stringify(v))
+}
+
+// ── Single-select ──
+
+export type AsyncSelectFieldProps<TOption = AsyncOption> = BaseFieldControlProps<any> & {
+  options: TOption[]
+  loading?: boolean
+  onInputValueChange?: (value: string) => void
+  placeholder?: string
+  getOptionValue?: (option: TOption) => any
+  getOptionLabel?: (option: TOption) => string
+  getOptionKey?: (option: TOption) => string
+}
+
+export function AsyncSelectField<TOption = AsyncOption>({
+  value,
+  onChange,
+  onBlur,
+  disabled,
+  invalid,
+  options,
+  loading,
+  onInputValueChange,
+  placeholder = "Search...",
+  getOptionValue = defaultGetOptionValue,
+  getOptionLabel = defaultGetOptionLabel,
+  getOptionKey = defaultGetOptionKey,
+}: AsyncSelectFieldProps<TOption>) {
+  const anchorRef = useRef<HTMLDivElement>(null)
+
+  return (
+    <div ref={anchorRef}>
+      <Combobox
+        value={value}
+        onValueChange={(val) => onChange(val)}
+        disabled={disabled}
+        onInputValueChange={(val, { reason }) => {
+          if (reason === "input-change") {
+            onInputValueChange?.(val)
+          }
+        }}
+      >
+        <ComboboxInput
+          placeholder={placeholder}
+          showClear={!!value}
+          onBlur={onBlur}
+          aria-invalid={invalid || undefined}
+        />
+        <ComboboxContent anchor={anchorRef}>
+          <ComboboxList>
+            {loading && (
+              <div className="flex items-center justify-center py-4">
+                <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+              </div>
+            )}
+            {!loading &&
+              options.map((opt) => (
+                <ComboboxItem key={getOptionKey(opt)} value={getOptionValue(opt)}>
+                  {getOptionLabel(opt)}
+                </ComboboxItem>
+              ))}
+            {!loading && options.length === 0 && (
+              <ComboboxEmpty>No results found</ComboboxEmpty>
+            )}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+    </div>
+  )
+}
+
+// ── Multi-select ──
+
+export type AsyncMultiSelectFieldProps<TOption = AsyncOption> = BaseFieldControlProps<any[]> & {
+  options: TOption[]
+  loading?: boolean
+  onInputValueChange?: (value: string) => void
+  placeholder?: string
+  getOptionValue?: (option: TOption) => any
+  getOptionLabel?: (option: TOption) => string
+  getOptionKey?: (option: TOption) => string
+}
+
+export function AsyncMultiSelectField<TOption = AsyncOption>({
+  value,
+  onChange,
+  onBlur,
+  disabled,
+  invalid,
+  options,
+  loading,
+  onInputValueChange,
+  placeholder = "Search...",
+  getOptionValue = defaultGetOptionValue,
+  getOptionLabel = defaultGetOptionLabel,
+  getOptionKey = defaultGetOptionKey,
+}: AsyncMultiSelectFieldProps<TOption>) {
+  const anchorRef = useRef<HTMLDivElement>(null)
+
+  return (
+    <div ref={anchorRef}>
+      <Combobox
+        multiple
+        value={value ?? []}
+        onValueChange={(val) => onChange(val as any[])}
+        disabled={disabled}
+        onInputValueChange={(val, { reason }) => {
+          if (reason === "input-change") {
+            onInputValueChange?.(val)
+          }
+        }}
+      >
+        <ComboboxInput
+          placeholder={placeholder}
+          showClear={value && value.length > 0}
+          onBlur={onBlur}
+          aria-invalid={invalid || undefined}
+        />
+        <ComboboxContent anchor={anchorRef}>
+          <ComboboxList>
+            {loading && (
+              <div className="flex items-center justify-center py-4">
+                <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+              </div>
+            )}
+            {!loading &&
+              options.map((opt) => (
+                <ComboboxItem key={getOptionKey(opt)} value={getOptionValue(opt)}>
+                  {getOptionLabel(opt)}
+                </ComboboxItem>
+              ))}
+            {!loading && options.length === 0 && (
+              <ComboboxEmpty>No results found</ComboboxEmpty>
+            )}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+    </div>
+  )
+}
diff --git a/shared/components/form/controls/checkbox-field.tsx b/shared/components/form/controls/checkbox-field.tsx
new file mode 100644
index 0000000..66a9e79
--- /dev/null
+++ b/shared/components/form/controls/checkbox-field.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import type { BaseFieldControlProps } from "../types"
+import { Checkbox } from "@/shared/components/ui/checkbox"
+
+export type CheckboxFieldProps = BaseFieldControlProps<boolean> & {
+  label?: string
+}
+
+export function CheckboxField({
+  value,
+  onChange,
+  onBlur,
+  name,
+  disabled,
+  invalid,
+}: CheckboxFieldProps) {
+  return (
+    <Checkbox
+      checked={value}
+      onCheckedChange={(checked) => onChange(checked === true)}
+      onBlur={onBlur}
+      name={name}
+      disabled={disabled}
+      aria-invalid={invalid || undefined}
+    />
+  )
+}
diff --git a/shared/components/form/controls/file-input-field.tsx b/shared/components/form/controls/file-input-field.tsx
new file mode 100644
index 0000000..e6f83db
--- /dev/null
+++ b/shared/components/form/controls/file-input-field.tsx
@@ -0,0 +1,28 @@
+import type { BaseFieldControlProps } from "../types"
+import { Input } from "@/shared/components/ui/input"
+
+export type FileInputFieldProps = BaseFieldControlProps<File | null> & {
+  accept?: string
+}
+
+export function FileInputField({
+  // value intentionally unused — file inputs cannot be controlled
+  onBlur,
+  name,
+  disabled,
+  invalid,
+  accept,
+  onChange,
+}: FileInputFieldProps) {
+  return (
+    <Input
+      type="file"
+      accept={accept}
+      onBlur={onBlur}
+      name={name}
+      disabled={disabled}
+      aria-invalid={invalid || undefined}
+      onChange={(e) => onChange(e.target.files?.[0] ?? null)}
+    />
+  )
+}
diff --git a/shared/components/form/controls/select-field.tsx b/shared/components/form/controls/select-field.tsx
new file mode 100644
index 0000000..b8999ee
--- /dev/null
+++ b/shared/components/form/controls/select-field.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import type { BaseFieldControlProps, SelectOption } from "../types"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/components/ui/select"
+
+export type SelectFieldProps = BaseFieldControlProps<string> & {
+  placeholder?: string
+  options: SelectOption[]
+}
+
+export function SelectField({
+  value,
+  onChange,
+  onBlur,
+  name,
+  disabled,
+  invalid,
+  placeholder,
+  options,
+}: SelectFieldProps) {
+  return (
+    <Select value={value} onValueChange={onChange} disabled={disabled} name={name}>
+      <SelectTrigger
+        className="w-full"
+        aria-invalid={invalid || undefined}
+        onBlur={onBlur}
+      >
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((opt) => (
+          <SelectItem key={opt.value} value={opt.value}>
+            {opt.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/shared/components/form/controls/text-input-field.tsx b/shared/components/form/controls/text-input-field.tsx
new file mode 100644
index 0000000..371f2e2
--- /dev/null
+++ b/shared/components/form/controls/text-input-field.tsx
@@ -0,0 +1,31 @@
+import type { BaseFieldControlProps } from "../types"
+import { Input } from "@/shared/components/ui/input"
+
+export type TextInputFieldProps = BaseFieldControlProps<string> & {
+  placeholder?: string
+  type?: React.HTMLInputTypeAttribute
+}
+
+export function TextInputField({
+  value,
+  onChange,
+  onBlur,
+  name,
+  disabled,
+  invalid,
+  placeholder,
+  type = "text",
+}: TextInputFieldProps) {
+  return (
+    <Input
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onBlur}
+      name={name}
+      disabled={disabled}
+      aria-invalid={invalid || undefined}
+      placeholder={placeholder}
+      type={type}
+    />
+  )
+}
diff --git a/shared/components/form/controls/textarea-field.tsx b/shared/components/form/controls/textarea-field.tsx
new file mode 100644
index 0000000..41a08b2
--- /dev/null
+++ b/shared/components/form/controls/textarea-field.tsx
@@ -0,0 +1,31 @@
+import type { BaseFieldControlProps } from "../types"
+import { Textarea } from "@/shared/components/ui/textarea"
+
+export type TextareaFieldProps = BaseFieldControlProps<string> & {
+  placeholder?: string
+  rows?: number
+}
+
+export function TextareaField({
+  value,
+  onChange,
+  onBlur,
+  name,
+  disabled,
+  invalid,
+  placeholder,
+  rows,
+}: TextareaFieldProps) {
+  return (
+    <Textarea
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onBlur}
+      name={name}
+      disabled={disabled}
+      aria-invalid={invalid || undefined}
+      placeholder={placeholder}
+      rows={rows}
+    />
+  )
+}
diff --git a/shared/components/form/field-shell.tsx b/shared/components/form/field-shell.tsx
new file mode 100644
index 0000000..583729f
--- /dev/null
+++ b/shared/components/form/field-shell.tsx
@@ -0,0 +1,29 @@
+import type { FieldShellProps } from "./types"
+import {
+  Field,
+  FieldLabel,
+  FieldError,
+  FieldDescription,
+} from "@/shared/components/ui/field"
+
+export function FieldShell({
+  label,
+  error,
+  description,
+  required,
+  children,
+}: FieldShellProps) {
+  return (
+    <Field data-invalid={!!error || undefined}>
+      {label && (
+        <FieldLabel>
+          {label}
+          {required && <span className="text-destructive">*</span>}
+        </FieldLabel>
+      )}
+      {children}
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
diff --git a/shared/components/form/fields/rhf-async-select-field.tsx b/shared/components/form/fields/rhf-async-select-field.tsx
new file mode 100644
index 0000000..7465857
--- /dev/null
+++ b/shared/components/form/fields/rhf-async-select-field.tsx
@@ -0,0 +1,278 @@
+"use client"
+
+import { useState } from "react"
+import type { FieldValues, FieldPath } from "react-hook-form"
+import {
+  useFormContext,
+  useController,
+} from "react-hook-form"
+import { useQuery, useQueryClient } from "@tanstack/react-query"
+import { FieldShell } from "../field-shell"
+import {
+  AsyncSelectField,
+  AsyncMultiSelectField,
+  type AsyncSelectFieldProps,
+  type AsyncMultiSelectFieldProps,
+} from "../controls/async-select-field"
+import { Field, FieldLabel, FieldError, FieldDescription } from "@/shared/components/ui/field"
+import { Button } from "@/shared/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/components/ui/dialog"
+import { ScrollArea } from "@/shared/components/ui/scroll-area"
+import { PlusIcon } from "lucide-react"
+
+// ── Inline create types ──
+
+export type InlineCreateFormProps = {
+  onSuccess: (newItem?: { value: string; label: string }) => void
+}
+
+export type InlineCreateConfig = {
+  createForm: (props: InlineCreateFormProps) => React.ReactNode
+  createLabel?: string
+}
+
+function extractItems(response: unknown): any[] {
+  if (Array.isArray(response)) return response
+  if (response && typeof response === "object") {
+    const obj = response as Record<string, unknown>
+    if (obj.data && typeof obj.data === "object" && !Array.isArray(obj.data)) {
+      const nested = obj.data as Record<string, unknown>
+      if (Array.isArray(nested.data)) return nested.data
+    }
+    if (Array.isArray(obj.data)) return obj.data
+  }
+  return []
+}
+
+// ── Props forwarded to the underlying control ──
+
+type AsyncSelectControlProps = Omit<
+  AsyncSelectFieldProps,
+  keyof import("../types").BaseFieldControlProps<any> | "options" | "loading" | "onInputValueChange"
+>
+
+type AsyncMultiSelectControlProps = Omit<
+  AsyncMultiSelectFieldProps,
+  keyof import("../types").BaseFieldControlProps<any> | "options" | "loading" | "onInputValueChange"
+>
+
+// ── Shared base props ──
+
+type BaseRhfAsyncFieldProps = {
+  label?: string
+  description?: string
+  required?: boolean
+  disabled?: boolean
+  queryKey: string[]
+  staleTime?: number
+} & Partial<InlineCreateConfig>
+
+type WithLoadOptions = {
+  loadOptions: () => Promise<any[]>
+  listFn?: never
+  mapOption?: never
+}
+
+type WithCrudClient<TItem> = {
+  loadOptions?: never
+  listFn: () => Promise<any>
+  mapOption?: (item: TItem) => any
+}
+
+type DataSource<TItem = unknown> = WithLoadOptions | WithCrudClient<TItem>
+
+function useAsyncOptions<TItem>(
+  queryKey: string[],
+  source: DataSource<TItem>,
+  staleTime?: number,
+) {
+  return useQuery<any[]>({
+    queryKey,
+    queryFn: async () => {
+      if ("loadOptions" in source && source.loadOptions) {
+        return source.loadOptions()
+      }
+      if ("listFn" in source && source.listFn) {
+        const response = await source.listFn()
+        const items = extractItems(response)
+        return source.mapOption ? items.map(source.mapOption) : items
+      }
+      return []
+    },
+    staleTime: staleTime ?? 5 * 60 * 1000,
+  })
+}
+
+// ── Single-select wrapper ──
+
+type RhfAsyncSelectFieldProps<
+  TValues extends FieldValues,
+  TName extends FieldPath<TValues>,
+  TItem = unknown,
+> = {
+  name: TName
+  multiple?: false
+} & BaseRhfAsyncFieldProps & DataSource<TItem> & AsyncSelectControlProps
+
+export function RhfAsyncSelectField<
+  TValues extends FieldValues,
+  TName extends FieldPath<TValues>,
+  TItem = unknown,
+>(props: RhfAsyncSelectFieldProps<TValues, TName, TItem>) {
+  const {
+    name, label, description, required, disabled,
+    queryKey, staleTime,
+    loadOptions, listFn, mapOption,
+    createForm, createLabel,
+    ...controlProps
+  } = props
+
+  const source = { loadOptions, listFn, mapOption } as DataSource<TItem>
+
+  const { control } = useFormContext<TValues>()
+  const { field, fieldState: { error } } = useController({ name, control, disabled })
+  const { data: options = [], isLoading } = useAsyncOptions(queryKey, source, staleTime)
+  const [inputValue, setInputValue] = useState("")
+  const [isCreateOpen, setIsCreateOpen] = useState(false)
+  const queryClient = useQueryClient()
+
+  const getLabel = controlProps.getOptionLabel ?? ((o: any) => o.label)
+
+  const filtered = inputValue
+    ? options.filter((o) => String(getLabel(o)).toLowerCase().includes(inputValue.toLowerCase()))
+    : options
+
+  const handleCreateSuccess = (newItem?: { value: string; label: string }) => {
+    queryClient.invalidateQueries({ queryKey })
+    if (newItem) {
+      field.onChange(newItem)
+    }
+    setIsCreateOpen(false)
+  }
+
+  // When a createForm is provided, render a custom label row with the "+" button
+  if (createForm) {
+    return (
+      <Field data-invalid={!!error || undefined}>
+        {label && (
+          <div className="flex items-center justify-between">
+            <FieldLabel>
+              {label}
+              {required && <span className="text-destructive ms-0.5">*</span>}
+            </FieldLabel>
+            <Button
+              type="button"
+              size="icon"
+              variant="ghost"
+              className="h-5 w-5"
+              onClick={() => setIsCreateOpen(true)}
+              title={`Add new ${createLabel ?? label}`}
+            >
+              <PlusIcon className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        )}
+        <AsyncSelectField
+          value={field.value}
+          onChange={field.onChange}
+          onBlur={field.onBlur}
+          disabled={field.disabled}
+          invalid={!!error}
+          options={filtered}
+          loading={isLoading}
+          onInputValueChange={setInputValue}
+          {...controlProps}
+        />
+        {description && <FieldDescription>{description}</FieldDescription>}
+        {error && <FieldError>{error.message}</FieldError>}
+
+        <Dialog open={isCreateOpen} onOpenChange={(v) => { if (!v) setIsCreateOpen(false) }}>
+          <DialogContent className="min-w-xl">
+            <DialogHeader>
+              <DialogTitle className="text-2xl font-bold">
+                Add {createLabel ?? label}
+              </DialogTitle>
+            </DialogHeader>
+            <ScrollArea className="max-h-[80vh] px-4">
+              {createForm({ onSuccess: handleCreateSuccess })}
+            </ScrollArea>
+          </DialogContent>
+        </Dialog>
+      </Field>
+    )
+  }
+
+  return (
+    <FieldShell label={label} error={error?.message} description={description} required={required}>
+      <AsyncSelectField
+        value={field.value}
+        onChange={field.onChange}
+        onBlur={field.onBlur}
+        disabled={field.disabled}
+        invalid={!!error}
+        options={filtered}
+        loading={isLoading}
+        onInputValueChange={setInputValue}
+        {...controlProps}
+      />
+    </FieldShell>
+  )
+}
+
+// ── Multi-select wrapper ──
+
+type RhfAsyncMultiSelectFieldProps<
+  TValues extends FieldValues,
+  TName extends FieldPath<TValues>,
+  TItem = unknown,
+> = {
+  name: TName
+  multiple: true
+} & BaseRhfAsyncFieldProps & DataSource<TItem> & AsyncMultiSelectControlProps
+
+export function RhfAsyncMultiSelectField<
+  TValues extends FieldValues,
+  TName extends FieldPath<TValues>,
+  TItem = unknown,
+>(props: RhfAsyncMultiSelectFieldProps<TValues, TName, TItem>) {
+  const {
+    name, label, description, required, disabled,
+    queryKey, staleTime,
+    loadOptions, listFn, mapOption,
+    ...controlProps
+  } = props
+
+  const source = { loadOptions, listFn, mapOption } as DataSource<TItem>
+
+  const { control } = useFormContext<TValues>()
+  const { field, fieldState: { error } } = useController({ name, control, disabled })
+  const { data: options = [], isLoading } = useAsyncOptions(queryKey, source, staleTime)
+  const [inputValue, setInputValue] = useState("")
+
+  const getLabel = controlProps.getOptionLabel ?? ((o: any) => o.label)
+
+  const filtered = inputValue
+    ? options.filter((o) => String(getLabel(o)).toLowerCase().includes(inputValue.toLowerCase()))
+    : options
+
+  return (
+    <FieldShell label={label} error={error?.message} description={description} required={required}>
+      <AsyncMultiSelectField
+        value={field.value ?? []}
+        onChange={field.onChange}
+        onBlur={field.onBlur}
+        disabled={field.disabled}
+        invalid={!!error}
+        options={filtered}
+        loading={isLoading}
+        onInputValueChange={setInputValue}
+        {...controlProps}
+      />
+    </FieldShell>
+  )
+}
diff --git a/shared/components/form/fields/rhf-checkbox-field.tsx b/shared/components/form/fields/rhf-checkbox-field.tsx
new file mode 100644
index 0000000..13db6a1
--- /dev/null
+++ b/shared/components/form/fields/rhf-checkbox-field.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import type { FieldValues, FieldPath } from "react-hook-form"
+import { RhfField } from "../rhf-field"
+import { CheckboxField, type CheckboxFieldProps } from "../controls/checkbox-field"
+import type { BaseFieldControlProps } from "../types"
+
+type RhfCheckboxFieldProps<
+  TValues extends FieldValues,
+  TName extends FieldPath<TValues>,
+> = {
+  name: TName
+  label?: string
+  description?: string
+  required?: boolean
+  disabled?: boolean
+} & Omit<CheckboxFieldProps, keyof BaseFieldControlProps<boolean>>
+
+export function RhfCheckboxField<
+  TValues extends FieldValues,
+  TName extends FieldPath<TValues>,
+>(props: RhfCheckboxFieldProps<TValues, TName>) {
+  return <RhfField {...props} component={CheckboxField} />
+}
diff --git a/shared/components/form/fields/rhf-file-field.tsx b/shared/components/form/fields/rhf-file-field.tsx
new file mode 100644
index 0000000..4b315a7
--- /dev/null
+++ b/shared/components/form/fields/rhf-file-field.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import type { FieldValues, FieldPath } from "react-hook-form"
+import { RhfField } from "../rhf-field"
+import { FileInputField, type FileInputFieldProps } from "../controls/file-input-field"
+import type { BaseFieldControlProps } from "../types"
+
+type RhfFileFieldProps<
+  TValues extends FieldValues,
+  TName extends FieldPath<TValues>,
+> = {
+  name: TName
+  label?: string
+  description?: string
+  required?: boolean
+  disabled?: boolean
+} & Omit<FileInputFieldProps, keyof BaseFieldControlProps<File | null>>
+
+export function RhfFileField<
+  TValues extends FieldValues,
+  TName extends FieldPath<TValues>,
+>(props: RhfFileFieldProps<TValues, TName>) {
+  return <RhfField {...props} component={FileInputField} />
+}
diff --git a/shared/components/form/fields/rhf-select-field.tsx b/shared/components/form/fields/rhf-select-field.tsx
new file mode 100644
index 0000000..6f08c69
--- /dev/null
+++ b/shared/components/form/fields/rhf-select-field.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import type { FieldValues, FieldPath } from "react-hook-form"
+import { RhfField } from "../rhf-field"
+import { SelectField, type SelectFieldProps } from "../controls/select-field"
+import type { BaseFieldControlProps } from "../types"
+
+type RhfSelectFieldProps<
+  TValues extends FieldValues,
+  TName extends FieldPath<TValues>,
+> = {
+  name: TName
+  label?: string
+  description?: string
+  required?: boolean
+  disabled?: boolean
+} & Omit<SelectFieldProps, keyof BaseFieldControlProps<string>>
+
+export function RhfSelectField<
+  TValues extends FieldValues,
+  TName extends FieldPath<TValues>,
+>(props: RhfSelectFieldProps<TValues, TName>) {
+  return <RhfField {...props} component={SelectField} />
+}
diff --git a/shared/components/form/fields/rhf-text-field.tsx b/shared/components/form/fields/rhf-text-field.tsx
new file mode 100644
index 0000000..db66fd4
--- /dev/null
+++ b/shared/components/form/fields/rhf-text-field.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import type { FieldValues, FieldPath } from "react-hook-form"
+import { RhfField } from "../rhf-field"
+import { TextInputField, type TextInputFieldProps } from "../controls/text-input-field"
+import type { BaseFieldControlProps } from "../types"
+
+type RhfTextFieldProps<
+  TValues extends FieldValues,
+  TName extends FieldPath<TValues>,
+> = {
+  name: TName
+  label?: string
+  description?: string
+  required?: boolean
+  disabled?: boolean
+} & Omit<TextInputFieldProps, keyof BaseFieldControlProps<string>>
+
+export function RhfTextField<
+  TValues extends FieldValues,
+  TName extends FieldPath<TValues>,
+>(props: RhfTextFieldProps<TValues, TName>) {
+  return <RhfField {...props} component={TextInputField} />
+}
diff --git a/shared/components/form/fields/rhf-textarea-field.tsx b/shared/components/form/fields/rhf-textarea-field.tsx
new file mode 100644
index 0000000..ae6789c
--- /dev/null
+++ b/shared/components/form/fields/rhf-textarea-field.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import type { FieldValues, FieldPath } from "react-hook-form"
+import { RhfField } from "../rhf-field"
+import { TextareaField, type TextareaFieldProps } from "../controls/textarea-field"
+import type { BaseFieldControlProps } from "../types"
+
+type RhfTextareaFieldProps<
+  TValues extends FieldValues,
+  TName extends FieldPath<TValues>,
+> = {
+  name: TName
+  label?: string
+  description?: string
+  required?: boolean
+  disabled?: boolean
+} & Omit<TextareaFieldProps, keyof BaseFieldControlProps<string>>
+
+export function RhfTextareaField<
+  TValues extends FieldValues,
+  TName extends FieldPath<TValues>,
+>(props: RhfTextareaFieldProps<TValues, TName>) {
+  return <RhfField {...props} component={TextareaField} />
+}
diff --git a/shared/components/form/fields/simple-title-form.tsx b/shared/components/form/fields/simple-title-form.tsx
new file mode 100644
index 0000000..22e6033
--- /dev/null
+++ b/shared/components/form/fields/simple-title-form.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import { z } from "zod"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Plus } from "lucide-react"
+import { Button } from "@/shared/components/ui/button"
+import { FieldGroup } from "@/shared/components/ui/field"
+import { Rhform, RhfTextField } from "@/shared/components/form"
+import { toast } from "sonner"
+import type { InlineCreateFormProps } from "./rhf-async-select-field"
+
+const schema = z.object({ title: z.string().min(1, "Required") })
+type FormValues = z.infer<typeof schema>
+
+export type SimpleTitleFormProps = InlineCreateFormProps & {
+  placeholder?: string
+  submitLabel?: string
+  createFn: (title: string) => Promise<any>
+  mapResult?: (data: any) => { value: string; label: string }
+}
+
+const defaultMapResult = (data: any) => {
+  const item = data?.data ?? data
+  return {
+    value: String(item.id),
+    label: item.name ?? item.title ?? String(item.id),
+  }
+}
+
+export function SimpleTitleForm({
+  onSuccess,
+  placeholder = "Enter name",
+  submitLabel = "Create",
+  createFn,
+  mapResult = defaultMapResult,
+}: SimpleTitleFormProps) {
+  const form = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: { title: "" },
+  })
+
+  const handleSubmit = async (values: FormValues) => {
+    try {
+      const result = await createFn(values.title)
+      toast.success(`${submitLabel}d successfully`)
+      form.reset()
+      onSuccess(mapResult(result))
+    } catch {
+      toast.error(`Failed to ${submitLabel.toLowerCase()}`)
+    }
+  }
+
+  return (
+    <Rhform form={form} onSubmit={handleSubmit}>
+      <FieldGroup>
+        <RhfTextField name="title" label="Name" placeholder={placeholder} required />
+        <Button type="submit" disabled={form.formState.isSubmitting}>
+          <Plus />
+          {form.formState.isSubmitting ? "Creating..." : submitLabel}
+        </Button>
+      </FieldGroup>
+    </Rhform>
+  )
+}
diff --git a/shared/components/form/index.ts b/shared/components/form/index.ts
new file mode 100644
index 0000000..e9138b6
--- /dev/null
+++ b/shared/components/form/index.ts
@@ -0,0 +1,33 @@
+// ── Core ──
+export { Rhform } from "./rhform"
+export { RhfField } from "./rhf-field"
+export { FieldShell } from "./field-shell"
+
+// ── Types ──
+export type {
+  BaseFieldControlProps,
+  FieldShellProps,
+  RhformProps,
+  AsyncOption,
+  SelectOption,
+} from "./types"
+
+// ── Controls ──
+export { TextInputField, type TextInputFieldProps } from "./controls/text-input-field"
+export { TextareaField, type TextareaFieldProps } from "./controls/textarea-field"
+export { CheckboxField, type CheckboxFieldProps } from "./controls/checkbox-field"
+export { SelectField, type SelectFieldProps } from "./controls/select-field"
+export {
+  AsyncSelectField, type AsyncSelectFieldProps,
+  AsyncMultiSelectField, type AsyncMultiSelectFieldProps,
+} from "./controls/async-select-field"
+export { FileInputField, type FileInputFieldProps } from "./controls/file-input-field"
+
+// ── RHF Field Wrappers ──
+export { RhfTextField } from "./fields/rhf-text-field"
+export { RhfTextareaField } from "./fields/rhf-textarea-field"
+export { RhfCheckboxField } from "./fields/rhf-checkbox-field"
+export { RhfSelectField } from "./fields/rhf-select-field"
+export { RhfFileField } from "./fields/rhf-file-field"
+export { RhfAsyncSelectField, RhfAsyncMultiSelectField, type InlineCreateFormProps, type InlineCreateConfig } from "./fields/rhf-async-select-field"
+export { SimpleTitleForm, type SimpleTitleFormProps } from "./fields/simple-title-form"
diff --git a/shared/components/form/rhf-field.tsx b/shared/components/form/rhf-field.tsx
new file mode 100644
index 0000000..4318631
--- /dev/null
+++ b/shared/components/form/rhf-field.tsx
@@ -0,0 +1,62 @@
+"use client"
+
+import {
+  useFormContext,
+  useController,
+  type FieldValues,
+  type FieldPath,
+} from "react-hook-form"
+import { FieldShell } from "./field-shell"
+import type { BaseFieldControlProps } from "./types"
+
+type RhfFieldProps<
+  TValues extends FieldValues,
+  TName extends FieldPath<TValues>,
+  TControlProps extends BaseFieldControlProps<any>,
+> = {
+  name: TName
+  label?: string
+  description?: string
+  required?: boolean
+  disabled?: boolean
+  component: React.ComponentType<TControlProps>
+} & Omit<TControlProps, keyof BaseFieldControlProps<any>>
+
+export function RhfField<
+  TValues extends FieldValues,
+  TName extends FieldPath<TValues>,
+  TControlProps extends BaseFieldControlProps<any>,
+>({
+  name,
+  label,
+  description,
+  required,
+  disabled,
+  component: Component,
+  ...controlProps
+}: RhfFieldProps<TValues, TName, TControlProps>) {
+  const { control } = useFormContext<TValues>()
+  const {
+    field,
+    fieldState: { error },
+  } = useController({ name, control, disabled })
+
+  return (
+    <FieldShell
+      label={label}
+      error={error?.message}
+      description={description}
+      required={required}
+    >
+      <Component
+        {...(controlProps as any)}
+        value={field.value}
+        onChange={field.onChange}
+        onBlur={field.onBlur}
+        name={field.name}
+        disabled={field.disabled}
+        invalid={!!error}
+      />
+    </FieldShell>
+  )
+}
diff --git a/shared/components/form/rhform.tsx b/shared/components/form/rhform.tsx
new file mode 100644
index 0000000..f235b9c
--- /dev/null
+++ b/shared/components/form/rhform.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import type { FieldValues } from "react-hook-form"
+import { FormProvider } from "react-hook-form"
+import type { RhformProps } from "./types"
+
+export function Rhform<TValues extends FieldValues>({
+  form,
+  onSubmit,
+  children,
+  className,
+}: RhformProps<TValues>) {
+  return (
+    <FormProvider {...form}>
+      <form
+        onSubmit={(e) => { e.stopPropagation(); form.handleSubmit(onSubmit)(e) }}
+        noValidate
+        className={className}
+      >
+        {children}
+      </form>
+    </FormProvider>
+  )
+}
diff --git a/shared/components/form/types.ts b/shared/components/form/types.ts
new file mode 100644
index 0000000..2c4ba38
--- /dev/null
+++ b/shared/components/form/types.ts
@@ -0,0 +1,63 @@
+import type { ReactNode } from "react"
+import type {
+  FieldValues,
+  FieldPath,
+  UseFormReturn,
+} from "react-hook-form"
+
+// ── Base contract for all field control components ──
+
+export type BaseFieldControlProps<TValue = string> = {
+  value: TValue
+  onChange: (value: TValue) => void
+  onBlur?: () => void
+  name?: string
+  disabled?: boolean
+  invalid?: boolean
+}
+
+// ── FieldShell props (pure UI) ──
+
+export type FieldShellProps = {
+  label?: string
+  error?: string
+  description?: string
+  required?: boolean
+  children: ReactNode
+}
+
+// ── Rhform props ──
+
+export type RhformProps<TValues extends FieldValues> = {
+  form: UseFormReturn<TValues>
+  onSubmit: (values: TValues) => void
+  children: ReactNode
+  className?: string
+}
+
+// ── RhfField props ──
+
+export type RhfFieldProps<
+  TValues extends FieldValues,
+  TName extends FieldPath<TValues>,
+  TControlProps extends BaseFieldControlProps<any>,
+> = {
+  name: TName
+  label?: string
+  description?: string
+  required?: boolean
+  disabled?: boolean
+  component: React.ComponentType<TControlProps>
+} & Omit<TControlProps, keyof BaseFieldControlProps<any>>
+
+// ── Option types ──
+
+export type AsyncOption = {
+  value: string
+  label: string
+}
+
+export type SelectOption = {
+  value: string
+  label: string
+}
diff --git a/shared/components/query-provider.tsx b/shared/components/query-provider.tsx
new file mode 100644
index 0000000..c2ef543
--- /dev/null
+++ b/shared/components/query-provider.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import {
+  isServer,
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query"
+
+function createQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+        refetchOnWindowFocus: false,
+      },
+      mutations: {
+        retry: 0,
+      },
+    },
+  })
+}
+
+let browserQueryClient: QueryClient | undefined
+
+function getQueryClient() {
+  if (isServer) {
+    return createQueryClient()
+  }
+
+  browserQueryClient ??= createQueryClient()
+
+  return browserQueryClient
+}
+
+function QueryProvider({ children }: React.PropsWithChildren) {
+  const queryClient = getQueryClient()
+
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+}
+
+export { QueryProvider }
\ No newline at end of file
diff --git a/components/theme-provider.tsx b/shared/components/theme-provider.tsx
similarity index 100%
rename from components/theme-provider.tsx
rename to shared/components/theme-provider.tsx
diff --git a/shared/components/ui/accordion.tsx b/shared/components/ui/accordion.tsx
new file mode 100644
index 0000000..9083c40
--- /dev/null
+++ b/shared/components/ui/accordion.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import * as React from "react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-start text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--radix-accordion-content-height) pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/shared/components/ui/alert-dialog.tsx b/shared/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..aaaccad
--- /dev/null
+++ b/shared/components/ui/alert-dialog.tsx
@@ -0,0 +1,199 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+import { Button } from "@/shared/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 start-1/2 z-50 grid w-full -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-background p-6 ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "font-heading text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}
diff --git a/shared/components/ui/alert.tsx b/shared/components/ui/alert.tsx
new file mode 100644
index 0000000..5596e61
--- /dev/null
+++ b/shared/components/ui/alert.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/shared/lib/utils"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-start text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card border border  text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-heading font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2.5 end-3", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }
diff --git a/shared/components/ui/aspect-ratio.tsx b/shared/components/ui/aspect-ratio.tsx
new file mode 100644
index 0000000..57e38fa
--- /dev/null
+++ b/shared/components/ui/aspect-ratio.tsx
@@ -0,0 +1,11 @@
+"use client"
+
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui"
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }
diff --git a/shared/components/ui/avatar.tsx b/shared/components/ui/avatar.tsx
new file mode 100644
index 0000000..3866c76
--- /dev/null
+++ b/shared/components/ui/avatar.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}
diff --git a/shared/components/ui/badge.tsx b/shared/components/ui/badge.tsx
new file mode 100644
index 0000000..76007f1
--- /dev/null
+++ b/shared/components/ui/badge.tsx
@@ -0,0 +1,49 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/shared/components/ui/breadcrumb.tsx b/shared/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..fd74b0d
--- /dev/null
+++ b/shared/components/ui/breadcrumb.tsx
@@ -0,0 +1,122 @@
+import * as React from "react"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      aria-label="breadcrumb"
+      data-slot="breadcrumb"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? (
+        <ChevronRightIcon className="rtl:rotate-180" />
+      )}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn(
+        "flex size-5 items-center justify-center [&>svg]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon
+      />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/shared/components/ui/button-group.tsx b/shared/components/ui/button-group.tsx
new file mode 100644
index 0000000..b235857
--- /dev/null
+++ b/shared/components/ui/button-group.tsx
@@ -0,0 +1,83 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+import { Separator } from "@/shared/components/ui/separator"
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-md!",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md!",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      className={cn(
+        "flex items-center gap-2 rounded-md border bg-muted px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}
diff --git a/components/ui/button.tsx b/shared/components/ui/button.tsx
similarity index 98%
rename from components/ui/button.tsx
rename to shared/components/ui/button.tsx
index 6ec06e1..5c0cb19 100644
--- a/components/ui/button.tsx
+++ b/shared/components/ui/button.tsx
@@ -2,7 +2,7 @@ import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/shared/lib/utils"
 
 const buttonVariants = cva(
   "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
diff --git a/shared/components/ui/calendar.tsx b/shared/components/ui/calendar.tsx
new file mode 100644
index 0000000..b79f657
--- /dev/null
+++ b/shared/components/ui/calendar.tsx
@@ -0,0 +1,222 @@
+"use client"
+
+import * as React from "react"
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+  type Locale,
+} from "react-day-picker"
+
+import { cn } from "@/shared/lib/utils"
+import { Button, buttonVariants } from "@/shared/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  locale,
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "group/calendar bg-background p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      locale={locale}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString(locale?.code, { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative rounded-(--cell-radius)",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute inset-0 bg-popover opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "font-medium select-none",
+          captionLayout === "label"
+            ? "text-sm"
+            : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] text-muted-foreground select-none",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-s-(--cell-radius)"
+            : "[&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius)",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "relative isolate z-0 rounded-s-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:end-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn(
+          "relative isolate z-0 rounded-e-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:start-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_end
+        ),
+        today: cn(
+          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("rtl:rotate-180 size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon className={cn("rtl:rotate-180 size-4", className)} {...props} />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: ({ ...props }) => (
+          <CalendarDayButton locale={locale} {...props} />
+        ),
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  locale,
+  ...props
+}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString(locale?.code)}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/shared/components/ui/card.tsx b/shared/components/ui/card.tsx
new file mode 100644
index 0000000..223f312
--- /dev/null
+++ b/shared/components/ui/card.tsx
@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/shared/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-normal font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6 group-data-[size=sm]/card:px-4", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/shared/components/ui/carousel.tsx b/shared/components/ui/carousel.tsx
new file mode 100644
index 0000000..fe58352
--- /dev/null
+++ b/shared/components/ui/carousel.tsx
@@ -0,0 +1,242 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+
+import { cn } from "@/shared/lib/utils"
+import { Button } from "@/shared/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ms-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "ps-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute touch-manipulation rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -start-12 -translate-y-1/2"
+          : "-top-12 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ChevronLeftIcon className="rtl:rotate-180" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute touch-manipulation rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -end-12 -translate-y-1/2"
+          : "-bottom-12 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ChevronRightIcon className="rtl:rotate-180" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  useCarousel,
+}
diff --git a/shared/components/ui/chart.tsx b/shared/components/ui/chart.tsx
new file mode 100644
index 0000000..01055ef
--- /dev/null
+++ b/shared/components/ui/chart.tsx
@@ -0,0 +1,372 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+import type {
+  NameType,
+  ValueType,
+} from "recharts/types/component/DefaultTooltipContent"
+
+import { cn } from "@/shared/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+const INITIAL_DIMENSION = { width: 320, height: 200 } as const
+
+export type ChartConfig = Record<
+  string,
+  {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+>
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  initialDimension = INITIAL_DIMENSION,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"]
+  initialDimension?: {
+    width: number
+    height: number
+  }
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer
+          initialDimension={initialDimension}
+        >
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme ?? config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: "line" | "dot" | "dashed"
+    nameKey?: string
+    labelKey?: string
+  } & Omit<
+    RechartsPrimitive.DefaultTooltipContentProps<ValueType, NameType>,
+    "accessibilityLayer"
+  >) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === "string"
+        ? (config[label]?.label ?? label)
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    <div
+      className={cn(
+        "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item, index) => {
+            const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color ?? item.payload?.fill ?? item.color
+
+            return (
+              <div
+                key={index}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label ?? item.name}
+                        </span>
+                      </div>
+                      {item.value != null && (
+                        <span className="font-mono font-medium text-foreground tabular-nums">
+                          {typeof item.value === "number"
+                            ? item.value.toLocaleString()
+                            : String(item.value)}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> & {
+  hideIcon?: boolean
+  nameKey?: string
+} & RechartsPrimitive.DefaultLegendContentProps) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}
+    >
+      {payload
+        .filter((item) => item.type !== "none")
+        .map((item, index) => {
+          const key = `${nameKey ?? item.dataKey ?? "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+    </div>
+  )
+}
+
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
diff --git a/shared/components/ui/checkbox.tsx b/shared/components/ui/checkbox.tsx
new file mode 100644
index 0000000..168fa1f
--- /dev/null
+++ b/shared/components/ui/checkbox.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+import { CheckIcon } from "lucide-react"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+      >
+        <CheckIcon
+        />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
diff --git a/shared/components/ui/collapsible.tsx b/shared/components/ui/collapsible.tsx
new file mode 100644
index 0000000..2f7a4e7
--- /dev/null
+++ b/shared/components/ui/collapsible.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import { Collapsible as CollapsiblePrimitive } from "radix-ui"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/shared/components/ui/combobox.tsx b/shared/components/ui/combobox.tsx
new file mode 100644
index 0000000..8a886fe
--- /dev/null
+++ b/shared/components/ui/combobox.tsx
@@ -0,0 +1,299 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+
+import { cn } from "@/shared/lib/utils"
+import { Button } from "@/shared/components/ui/button"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/shared/components/ui/input-group"
+import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react"
+
+const Combobox = ComboboxPrimitive.Root
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
+}
+
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Trigger.Props) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+    </ComboboxPrimitive.Trigger>
+  )
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot="combobox-clear"
+      render={<InputGroupButton variant="ghost" size="icon-xs" />}
+      className={cn(className)}
+      {...props}
+    >
+      <XIcon className="pointer-events-none" />
+    </ComboboxPrimitive.Clear>
+  )
+}
+
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  showTrigger?: boolean
+  showClear?: boolean
+}) {
+  return (
+    <InputGroup className={cn("w-auto", className)}>
+      <ComboboxPrimitive.Input
+        render={<InputGroupInput disabled={disabled} />}
+        {...props}
+      />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            asChild
+            data-slot="input-group-button"
+            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}
+          >
+            <ComboboxTrigger />
+          </InputGroupButton>
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  )
+}
+
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  ...props
+}: ComboboxPrimitive.Popup.Props &
+  Pick<
+    ComboboxPrimitive.Positioner.Props,
+    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+  >) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="isolate z-50 pointer-events-auto"
+      >
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn("group/combobox-content relative z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  )
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Item.Props) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pe-8 ps-2 text-sm outline-none select-none transition-colors data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute end-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  )
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+  return (
+    <ComboboxPrimitive.Group
+      data-slot="combobox-group"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxLabel({
+  className,
+  ...props
+}: ComboboxPrimitive.GroupLabel.Props) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+  return (
+    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
+  )
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn(
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxSeparator({
+  className,
+  ...props
+}: ComboboxPrimitive.Separator.Props) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChips({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
+  ComboboxPrimitive.Chips.Props) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn(
+        "flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean
+}) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(
+        "flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pe-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant="ghost" size="icon-xs" />}
+          className="-ms-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove"
+        >
+          <XIcon className="pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  )
+}
+
+function ComboboxChipsInput({
+  className,
+  ...props
+}: ComboboxPrimitive.Input.Props) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-chip-input"
+      className={cn("min-w-16 flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null)
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+}
diff --git a/shared/components/ui/command.tsx b/shared/components/ui/command.tsx
new file mode 100644
index 0000000..7f7e003
--- /dev/null
+++ b/shared/components/ui/command.tsx
@@ -0,0 +1,195 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+
+import { cn } from "@/shared/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/components/ui/dialog"
+import {
+  InputGroup,
+  InputGroupAddon,
+} from "@/shared/components/ui/input-group"
+import { SearchIcon, CheckIcon } from "lucide-react"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = false,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn(
+          "top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0",
+          className
+        )}
+        showCloseButton={showCloseButton}
+      >
+        {children}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div data-slot="command-input-wrapper" className="p-1 pb-0">
+      <InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:ps-2!">
+        <CommandPrimitive.Input
+          data-slot="command-input"
+          className={cn(
+            "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          {...props}
+        />
+        <InputGroupAddon>
+          <SearchIcon className="size-4 shrink-0 opacity-50" />
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className={cn("py-6 text-center text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("-mx-1 h-px w-auto bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:**:[svg]:text-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <CheckIcon className="ms-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+    </CommandPrimitive.Item>
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ms-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/shared/components/ui/context-menu.tsx b/shared/components/ui/context-menu.tsx
new file mode 100644
index 0000000..6c23134
--- /dev/null
+++ b/shared/components/ui/context-menu.tsx
@@ -0,0 +1,263 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger
+      data-slot="context-menu-trigger"
+      className={cn("select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn("z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/context-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="rtl:rotate-180 ms-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn("z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pe-8 ps-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute end-2">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pe-8 ps-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute end-2">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:ps-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "ms-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
diff --git a/shared/components/ui/dialog.tsx b/shared/components/ui/dialog.tsx
new file mode 100644
index 0000000..6379df6
--- /dev/null
+++ b/shared/components/ui/dialog.tsx
@@ -0,0 +1,165 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+import { Button } from "@/shared/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 start-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-background p-6 text-sm ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close data-slot="dialog-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-4 end-4"
+              size="icon-sm"
+            >
+              <XIcon
+              />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("font-heading leading-none font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/shared/components/ui/direction.tsx b/shared/components/ui/direction.tsx
new file mode 100644
index 0000000..22e1657
--- /dev/null
+++ b/shared/components/ui/direction.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+import { Direction } from "radix-ui"
+
+function DirectionProvider({
+  dir,
+  direction,
+  children,
+}: React.ComponentProps<typeof Direction.DirectionProvider> & {
+  direction?: React.ComponentProps<typeof Direction.DirectionProvider>["dir"]
+}) {
+  return (
+    <Direction.DirectionProvider dir={direction ?? dir}>
+      {children}
+    </Direction.DirectionProvider>
+  )
+}
+
+const useDirection = Direction.useDirection
+
+export { DirectionProvider, useDirection }
diff --git a/shared/components/ui/drawer.tsx b/shared/components/ui/drawer.tsx
new file mode 100644
index 0000000..be289d7
--- /dev/null
+++ b/shared/components/ui/drawer.tsx
@@ -0,0 +1,131 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/shared/lib/utils"
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-background text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-e-xl data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-s-xl data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        <div className="mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-start",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("font-heading font-medium text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/shared/components/ui/dropdown-menu.tsx b/shared/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..d5d5bf5
--- /dev/null
+++ b/shared/components/ui/dropdown-menu.tsx
@@ -0,0 +1,269 @@
+"use client"
+
+import * as React from "react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pe-8 ps-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute end-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pe-8 ps-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute end-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:ps-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ms-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="rtl:rotate-180 ms-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/shared/components/ui/empty.tsx b/shared/components/ui/empty.tsx
new file mode 100644
index 0000000..95bcb06
--- /dev/null
+++ b/shared/components/ui/empty.tsx
@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/shared/lib/utils"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-12 text-center text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn("flex max-w-sm flex-col items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn(
+        "font-heading text-lg font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}
diff --git a/shared/components/ui/field.tsx b/shared/components/ui/field.tsx
new file mode 100644
index 0000000..649a91e
--- /dev/null
+++ b/shared/components/ui/field.tsx
@@ -0,0 +1,238 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/shared/lib/utils"
+import { Label } from "@/shared/components/ui/label"
+import { Separator } from "@/shared/components/ui/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-1 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-start text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ms-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}
diff --git a/shared/components/ui/hover-card.tsx b/shared/components/ui/hover-card.tsx
new file mode 100644
index 0000000..4ee981a
--- /dev/null
+++ b/shared/components/ui/hover-card.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import { HoverCard as HoverCardPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/shared/components/ui/input-group.tsx b/shared/components/ui/input-group.tsx
new file mode 100644
index 0000000..84d9129
--- /dev/null
+++ b/shared/components/ui/input-group.tsx
@@ -0,0 +1,156 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/shared/lib/utils"
+import { Button } from "@/shared/components/ui/button"
+import { Input } from "@/shared/components/ui/input"
+import { Textarea } from "@/shared/components/ui/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first ps-2 has-[>button]:-ms-1 has-[>kbd]:ms-[-0.15rem]",
+        "inline-end":
+          "order-last pe-2 has-[>button]:-me-1 has-[>kbd]:me-[-0.15rem]",
+        "block-start":
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end":
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}
diff --git a/shared/components/ui/input-otp.tsx b/shared/components/ui/input-otp.tsx
new file mode 100644
index 0000000..00d2c22
--- /dev/null
+++ b/shared/components/ui/input-otp.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+
+import { cn } from "@/shared/lib/utils"
+import { MinusIcon } from "lucide-react"
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "cn-input-otp flex items-center has-disabled:opacity-50",
+        containerClassName
+      )}
+      spellCheck={false}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn(
+        "flex items-center rounded-md has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "relative flex size-9 items-center justify-center border-y border-e border-input text-sm shadow-xs transition-all outline-none first:rounded-s-md first:border-s last:rounded-e-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-separator"
+      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+      role="separator"
+      {...props}
+    >
+      <MinusIcon
+      />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/shared/components/ui/input.tsx b/shared/components/ui/input.tsx
new file mode 100644
index 0000000..9e3664e
--- /dev/null
+++ b/shared/components/ui/input.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "@/shared/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/shared/components/ui/item.tsx b/shared/components/ui/item.tsx
new file mode 100644
index 0000000..127a63d
--- /dev/null
+++ b/shared/components/ui/item.tsx
@@ -0,0 +1,196 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+import { Separator } from "@/shared/components/ui/separator"
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn(
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn("my-2", className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  "group/item flex w-full flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50",
+      },
+      size: {
+        default: "gap-3.5 px-4 py-3.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "div"
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        "font-heading line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "line-clamp-2 text-start text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}
diff --git a/shared/components/ui/kbd.tsx b/shared/components/ui/kbd.tsx
new file mode 100644
index 0000000..9ee20d6
--- /dev/null
+++ b/shared/components/ui/kbd.tsx
@@ -0,0 +1,26 @@
+import { cn } from "@/shared/lib/utils"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }
diff --git a/shared/components/ui/label.tsx b/shared/components/ui/label.tsx
new file mode 100644
index 0000000..0f61c07
--- /dev/null
+++ b/shared/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/shared/components/ui/menubar.tsx b/shared/components/ui/menubar.tsx
new file mode 100644
index 0000000..56ccfb8
--- /dev/null
+++ b/shared/components/ui/menubar.tsx
@@ -0,0 +1,280 @@
+"use client"
+
+import * as React from "react"
+import { Menubar as MenubarPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        "flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn("z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", className )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/menubar-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-md py-1.5 pe-2 ps-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-8 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute start-2 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-md py-1.5 pe-2 ps-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute start-2 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-inset:ps-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        "ms-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-8 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="rtl:rotate-180 ms-auto size-4" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn("z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}
diff --git a/shared/components/ui/native-select.tsx b/shared/components/ui/native-select.tsx
new file mode 100644
index 0000000..f1fa478
--- /dev/null
+++ b/shared/components/ui/native-select.tsx
@@ -0,0 +1,52 @@
+import * as React from "react"
+
+import { cn } from "@/shared/lib/utils"
+import { ChevronDownIcon } from "lucide-react"
+
+type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
+  size?: "sm" | "default"
+}
+
+function NativeSelect({
+  className,
+  size = "default",
+  ...props
+}: NativeSelectProps) {
+  return (
+    <div
+      className={cn(
+        "group/native-select relative w-fit has-[select:disabled]:opacity-50",
+        className
+      )}
+      data-slot="native-select-wrapper"
+      data-size={size}
+    >
+      <select
+        data-slot="native-select"
+        data-size={size}
+        className="h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent py-1 pe-8 ps-2.5 text-sm shadow-xs transition-[color,box-shadow] outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-8 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+        {...props}
+      />
+      <ChevronDownIcon className="pointer-events-none absolute top-1/2 end-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none" aria-hidden="true" data-slot="native-select-icon" />
+    </div>
+  )
+}
+
+function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
+  return <option data-slot="native-select-option" {...props} />
+}
+
+function NativeSelectOptGroup({
+  className,
+  ...props
+}: React.ComponentProps<"optgroup">) {
+  return (
+    <optgroup
+      data-slot="native-select-optgroup"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }
diff --git a/shared/components/ui/navigation-menu.tsx b/shared/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..3812312
--- /dev/null
+++ b/shared/components/ui/navigation-menu.tsx
@@ -0,0 +1,164 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+import { ChevronDownIcon } from "lucide-react"
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon className="relative top-px ms-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180" aria-hidden="true" />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "top-0 start-0 w-full p-2 pe-2.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full start-0 isolate z-50 flex justify-center"
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 duration-100 md:w-(--radix-navigation-menu-viewport-width) data-open:animate-in data-open:zoom-in-90 data-closed:animate-out data-closed:zoom-out-90",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "flex items-center gap-1.5 rounded-sm p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
+        className
+      )}
+      {...props}
+    >
+      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-ss-sm bg-border shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}
diff --git a/shared/components/ui/pagination.tsx b/shared/components/ui/pagination.tsx
new file mode 100644
index 0000000..2f48d17
--- /dev/null
+++ b/shared/components/ui/pagination.tsx
@@ -0,0 +1,129 @@
+import * as React from "react"
+
+import { cn } from "@/shared/lib/utils"
+import { Button } from "@/shared/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <Button
+      asChild
+      variant={isActive ? "outline" : "ghost"}
+      size={size}
+      className={cn(className)}
+    >
+      <a
+        aria-current={isActive ? "page" : undefined}
+        data-slot="pagination-link"
+        data-active={isActive}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function PaginationPrevious({
+  className,
+  text = "Previous",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("ps-2!", className)}
+      {...props}
+    >
+      <ChevronLeftIcon data-icon="inline-start" className="rtl:rotate-180" />
+      <span className="hidden sm:block">{text}</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  text = "Next",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("pe-2!", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">{text}</span>
+      <ChevronRightIcon data-icon="inline-end" className="rtl:rotate-180" />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn(
+        "flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon
+      />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}
diff --git a/shared/components/ui/popover.tsx b/shared/components/ui/popover.tsx
new file mode 100644
index 0000000..759d0f7
--- /dev/null
+++ b/shared/components/ui/popover.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <div
+      data-slot="popover-title"
+      className={cn("font-heading font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}
diff --git a/shared/components/ui/progress.tsx b/shared/components/ui/progress.tsx
new file mode 100644
index 0000000..0cb26a0
--- /dev/null
+++ b/shared/components/ui/progress.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "relative flex h-1.5 w-full items-center overflow-x-hidden rounded-full bg-muted",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="size-full flex-1 bg-primary transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }
diff --git a/shared/components/ui/radio-group.tsx b/shared/components/ui/radio-group.tsx
new file mode 100644
index 0000000..d3d7a3e
--- /dev/null
+++ b/shared/components/ui/radio-group.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid w-full gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="flex size-4 items-center justify-center"
+      >
+        <span className="absolute top-1/2 start-1/2 size-2 -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/shared/components/ui/resizable.tsx b/shared/components/ui/resizable.tsx
new file mode 100644
index 0000000..00d067b
--- /dev/null
+++ b/shared/components/ui/resizable.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/shared/lib/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: ResizablePrimitive.GroupProps) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: ResizablePrimitive.SeparatorProps & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 rtl:after:translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 rtl:aria-[orientation=horizontal]:after:-translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" />
+      )}
+    </ResizablePrimitive.Separator>
+  )
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
diff --git a/shared/components/ui/scroll-area.tsx b/shared/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..203b152
--- /dev/null
+++ b/shared/components/ui/scroll-area.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-s data-vertical:border-s-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/shared/components/ui/select.tsx b/shared/components/ui/select.tsx
new file mode 100644
index 0000000..2fe939b
--- /dev/null
+++ b/shared/components/ui/select.tsx
@@ -0,0 +1,192 @@
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pe-2 ps-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        data-align-trigger={position === "item-aligned"}
+        className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 rtl:data-[side=left]:translate-x-1 data-[side=right]:translate-x-1 rtl:data-[side=right]:-translate-x-1 data-[side=top]:-translate-y-1", className )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          data-position={position}
+          className={cn(
+            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
+            position === "popper" && ""
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pe-8 ps-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute end-2 flex size-4 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="pointer-events-none" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/shared/components/ui/separator.tsx b/shared/components/ui/separator.tsx
new file mode 100644
index 0000000..db3c6e4
--- /dev/null
+++ b/shared/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/shared/components/ui/sheet.tsx b/shared/components/ui/sheet.tsx
new file mode 100644
index 0000000..85bf832
--- /dev/null
+++ b/shared/components/ui/sheet.tsx
@@ -0,0 +1,144 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+import { Button } from "@/shared/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close data-slot="sheet-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-4 end-4"
+              size="icon-sm"
+            >
+              <XIcon
+              />
+              <span className="sr-only">Close</span>
+            </Button>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("font-heading font-medium text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/shared/components/ui/sidebar.tsx b/shared/components/ui/sidebar.tsx
new file mode 100644
index 0000000..e93bb5e
--- /dev/null
+++ b/shared/components/ui/sidebar.tsx
@@ -0,0 +1,702 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { useIsMobile } from "@/shared/hooks/use-mobile"
+import { cn } from "@/shared/lib/utils"
+import { Button } from "@/shared/components/ui/button"
+import { Input } from "@/shared/components/ui/input"
+import { Separator } from "@/shared/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/shared/components/ui/sheet"
+import { Skeleton } from "@/shared/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/shared/components/ui/tooltip"
+import { ArrowRight, ChevronLeftIcon, PanelLeftIcon } from "lucide-react"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        data-slot="sidebar-wrapper"
+        style={
+          {
+            "--sidebar-width": SIDEBAR_WIDTH,
+            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            ...style,
+          } as React.CSSProperties
+        }
+        className={cn(
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          dir={dir}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only px-8 ">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        data-side={side}
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-e group-data-[side=right]:border-s",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar , open } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon-sm"
+      className={cn(className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <ChevronLeftIcon className={cn(!open && "rotate-180")} />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "in-data-[side=left]:cursor-w-resize rtl:in-data-[side=left]:cursor-e-resize in-data-[side=right]:cursor-e-resize rtl:in-data-[side=right]:cursor-w-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize rtl:[[data-side=left][data-state=collapsed]_&]:cursor-w-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize rtl:[[data-side=right][data-state=collapsed]_&]:cursor-e-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 rtl:group-data-[collapsible=offcanvas]:-translate-x-0 group-data-[collapsible=offcanvas]:after:start-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-end-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "relative flex w-full flex-1 flex-col   md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("h-8 w-full bg-background shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 ", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "absolute top-3.5 end-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm " ,
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot.Root : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute top-1.5 end-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute end-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const [width] = React.useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  })
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px rtl:-translate-x-px flex-col gap-1 border-s border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px rtl:translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/shared/components/ui/skeleton.tsx b/shared/components/ui/skeleton.tsx
new file mode 100644
index 0000000..e802a33
--- /dev/null
+++ b/shared/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/shared/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/shared/components/ui/slider.tsx b/shared/components/ui/slider.tsx
new file mode 100644
index 0000000..3931a7c
--- /dev/null
+++ b/shared/components/ui/slider.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import * as React from "react"
+import { Slider as SliderPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className="relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5"
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className="absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }
diff --git a/shared/components/ui/sonner.tsx b/shared/components/ui/sonner.tsx
new file mode 100644
index 0000000..9280ee5
--- /dev/null
+++ b/shared/components/ui/sonner.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: (
+          <CircleCheckIcon className="size-4" />
+        ),
+        info: (
+          <InfoIcon className="size-4" />
+        ),
+        warning: (
+          <TriangleAlertIcon className="size-4" />
+        ),
+        error: (
+          <OctagonXIcon className="size-4" />
+        ),
+        loading: (
+          <Loader2Icon className="size-4 animate-spin" />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/shared/components/ui/spinner.tsx b/shared/components/ui/spinner.tsx
new file mode 100644
index 0000000..fb5cb81
--- /dev/null
+++ b/shared/components/ui/spinner.tsx
@@ -0,0 +1,10 @@
+import { cn } from "@/shared/lib/utils"
+import { Loader2Icon } from "lucide-react"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
+  )
+}
+
+export { Spinner }
diff --git a/shared/components/ui/switch.tsx b/shared/components/ui/switch.tsx
new file mode 100644
index 0000000..2d3269e
--- /dev/null
+++ b/shared/components/ui/switch.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] rtl:group-data-[size=default]/switch:data-checked:-translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] rtl:group-data-[size=sm]/switch:data-checked:-translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=default]/switch:data-unchecked:-translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=sm]/switch:data-unchecked:-translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
diff --git a/shared/components/ui/table.tsx b/shared/components/ui/table.tsx
new file mode 100644
index 0000000..ce0b7ee
--- /dev/null
+++ b/shared/components/ui/table.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/shared/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-start align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pe-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/shared/components/ui/tabs.tsx b/shared/components/ui/tabs.tsx
new file mode 100644
index 0000000..547375e
--- /dev/null
+++ b/shared/components/ui/tabs.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-end-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/shared/components/ui/textarea.tsx b/shared/components/ui/textarea.tsx
new file mode 100644
index 0000000..2546622
--- /dev/null
+++ b/shared/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/shared/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/shared/components/ui/toggle-group.tsx b/shared/components/ui/toggle-group.tsx
new file mode 100644
index 0000000..8f0bf8b
--- /dev/null
+++ b/shared/components/ui/toggle-group.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+import { toggleVariants } from "@/shared/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+  orientation: "horizontal",
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  orientation = "horizontal",
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      data-orientation={orientation}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs data-vertical:flex-col data-vertical:items-stretch",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider
+        value={{ variant, size, spacing, orientation }}
+      >
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-s-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-e-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md data-[state=on]:bg-muted group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-s-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-s group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/shared/components/ui/toggle.tsx b/shared/components/ui/toggle.tsx
new file mode 100644
index 0000000..e7d10d8
--- /dev/null
+++ b/shared/components/ui/toggle.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Toggle as TogglePrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+
+const toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-muted",
+      },
+      size: {
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }
diff --git a/shared/components/ui/tooltip.tsx b/shared/components/ui/tooltip.tsx
new file mode 100644
index 0000000..5516ec0
--- /dev/null
+++ b/shared/components/ui/tooltip.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
diff --git a/shared/data-view/resource-page/index.ts b/shared/data-view/resource-page/index.ts
new file mode 100644
index 0000000..f7031c8
--- /dev/null
+++ b/shared/data-view/resource-page/index.ts
@@ -0,0 +1,14 @@
+export { useResourcePage } from "./use-resource-page"
+export { ResourcePage } from "./resource-page"
+
+export type {
+    ResourcePageClient,
+    ResourceItem,
+    UseResourcePageOptions,
+} from "./use-resource-page"
+
+export type {
+    ResourceFormProps,
+    ResourcePageColumnHelpers,
+    ResourcePageProps,
+} from "./resource-page"
diff --git a/shared/data-view/resource-page/resource-page.tsx b/shared/data-view/resource-page/resource-page.tsx
new file mode 100644
index 0000000..19d1b6a
--- /dev/null
+++ b/shared/data-view/resource-page/resource-page.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import React from "react"
+import { DashboardHeader } from "@/base/components/layout/dashboard"
+import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
+import FormDialog from "@/shared/components/form-dialog"
+import { Card, CardContent } from "@/shared/components/ui/card"
+import { DataTable, type ActionsColumnOptions } from "@/shared/data-view/table-view"
+import { useResourcePage, type UseResourcePageOptions, type ResourceItem, type ResourcePageClient } from "./use-resource-page"
+import type { ColumnDef } from "@tanstack/react-table"
+
+export type ResourceFormProps<TClient extends ResourcePageClient> = {
+    resourceId: string | null
+    initialData: ResourceItem<TClient> | null
+    onSuccess: () => void
+}
+
+export type ResourcePageColumnHelpers<TClient extends ResourcePageClient> = {
+    actionsColumn: (options?: Partial<ActionsColumnOptions<ResourceItem<TClient>>>) => ColumnDef<ResourceItem<TClient>, unknown>
+    openEdit: (row: ResourceItem<TClient>) => void
+    deleteItem: (id: string) => Promise<unknown>
+}
+
+export type ResourcePageProps<TClient extends ResourcePageClient> = UseResourcePageOptions<TClient> & {
+    title: string
+    columns: ColumnDef<ResourceItem<TClient>>[] | ((helpers: ResourcePageColumnHelpers<TClient>) => ColumnDef<ResourceItem<TClient>>[])
+    renderForm: (props: ResourceFormProps<TClient>) => React.ReactNode
+    pageTitle?: string
+    paramKey?: string
+}
+
+export function ResourcePage<TClient extends ResourcePageClient>({
+    title,
+    columns: columnsProp,
+    renderForm,
+    pageTitle,
+    routeKey,
+    getClient,
+    queryOptions,
+    paramKey,
+}: ResourcePageProps<TClient>) {
+    type TItem = ResourceItem<TClient>
+    const page = useResourcePage<TClient>({ routeKey, getClient, queryOptions, paramKey })
+
+    const columns = typeof columnsProp === "function"
+        ? columnsProp({
+            actionsColumn: page.actionsColumn,
+            openEdit: page.openEdit,
+            deleteItem: page.deleteItem,
+        })
+        : columnsProp
+
+    type ListResponse = { data?: TItem[] }
+    const responseData = page.data as ListResponse | undefined
+
+    return (
+        <DashboardPage
+            header={
+                <DashboardHeader
+                    actions={
+                        <FormDialog title={title} paramKey={paramKey}>
+                            {(resourceId) =>
+                                renderForm({
+                                    resourceId,
+                                    initialData: page.selectedItem,
+                                    onSuccess: () => page.invalidateQuery(),
+                                })
+                            }
+                        </FormDialog>
+                    }
+                />
+            }
+            title={pageTitle}
+        >
+            <Card>
+                <CardContent>
+                    <DataTable
+                        columns={columns}
+                        data={(responseData?.data ?? []) as TItem[]}
+                        pagination={page.pagination}
+                        sorting={page.sorting}
+                        onChange={page.handleChange}
+                        isLoading={page.isLoading}
+                    />
+                </CardContent>
+            </Card>
+        </DashboardPage>
+    )
+}
diff --git a/shared/data-view/resource-page/use-resource-page.ts b/shared/data-view/resource-page/use-resource-page.ts
new file mode 100644
index 0000000..2cda42f
--- /dev/null
+++ b/shared/data-view/resource-page/use-resource-page.ts
@@ -0,0 +1,102 @@
+"use client"
+
+import { useState } from "react"
+import { useMutation } from "@tanstack/react-query"
+import { toast } from "sonner"
+import { confirm } from "@/shared/components/confirm-dialog"
+import { useAuthApi } from "@/shared/useApi"
+import { useFormDialog } from "@/shared/components/form-dialog"
+import { useDataTableQuery, createActionsColumn, type ActionsColumnOptions } from "@/shared/data-view/table-view"
+import type { ColumnDef } from "@tanstack/react-table"
+import type { CrudListItem, BaseCrudItem, CrudListResponse } from "@repo/api"
+import type { UseQueryOptions } from "@tanstack/react-query"
+
+type ApiInstance = ReturnType<typeof useAuthApi>
+
+export type ResourcePageClient = {
+    list(query?: any): Promise<any>
+    destroy(id: string): Promise<any>
+}
+
+export type ResourceItem<TClient> = CrudListItem<TClient> & BaseCrudItem
+
+export type UseResourcePageOptions<TClient extends ResourcePageClient> = {
+    routeKey: string
+    getClient: (api: ApiInstance) => TClient
+    queryOptions?: Omit<UseQueryOptions<CrudListResponse<TClient>>, "queryKey" | "queryFn">
+    paramKey?: string
+}
+
+export function useResourcePage<TClient extends ResourcePageClient>({
+    routeKey,
+    getClient,
+    queryOptions,
+    paramKey,
+}: UseResourcePageOptions<TClient>) {
+    type TItem = ResourceItem<TClient>
+
+    const api = useAuthApi()
+    const client = getClient(api)
+    const { open: openDialog, close: closeDialog, isOpen, resourceId } = useFormDialog(paramKey)
+    const [selectedItem, setSelectedItem] = useState<TItem | null>(null)
+
+    const tableQuery = useDataTableQuery({
+        queryKey: [routeKey],
+        client,
+        queryOptions,
+    })
+
+    const { mutateAsync: deleteItem } = useMutation({
+        mutationFn: (id: string) => {
+            const promise = client.destroy(id)
+            toast.promise(promise, {
+                loading: "Deleting...",
+                success: "Deleted successfully",
+                error: "Failed to delete",
+            })
+            return promise
+        },
+        onSuccess: () => tableQuery.invalidateQuery(),
+    })
+
+    const openEdit = (row: TItem) => {
+        setSelectedItem(row)
+        openDialog(String(row.id))
+    }
+
+    const openCreate = () => {
+        setSelectedItem(null)
+        openDialog()
+    }
+
+    const actionsColumn = (options?: Partial<ActionsColumnOptions<TItem>>): ColumnDef<TItem, unknown> =>
+        createActionsColumn<TItem>({
+            onEdit: (row) => openEdit(row),
+            onDelete: async (row) => {
+                const confirmed = await confirm({
+                    title: "Delete this item?",
+                    description: "This action cannot be undone.",
+                    confirmLabel: "Delete",
+                    variant: "destructive",
+                })
+                if (confirmed) await deleteItem(String(row.id))
+            },
+            ...options,
+        })
+
+    return {
+        api,
+        client,
+        isDialogOpen: isOpen,
+        dialogResourceId: resourceId,
+        selectedItem,
+        setSelectedItem,
+        openEdit,
+        openCreate,
+        openDialog,
+        closeDialog,
+        ...tableQuery,
+        deleteItem,
+        actionsColumn,
+    }
+}
diff --git a/shared/data-view/table-view/actions-column.tsx b/shared/data-view/table-view/actions-column.tsx
new file mode 100644
index 0000000..6f8fff4
--- /dev/null
+++ b/shared/data-view/table-view/actions-column.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import type { ColumnDef, Row } from "@tanstack/react-table"
+import { MoreHorizontal, Pencil, Trash2 } from "lucide-react"
+import { Button } from "@/shared/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/shared/components/ui/dropdown-menu"
+
+export type ActionsColumnOptions<TData> = {
+    onEdit?: (row: TData) => void
+    onDelete?: (row: TData) => Promise<unknown>
+}
+
+export function createActionsColumn<TData extends { id: string | number }>(
+    options: ActionsColumnOptions<TData>,
+): ColumnDef<TData, unknown> {
+    return {
+        id: "actions",
+        header: () => <span className="sr-only">Actions</span>,
+        cell: ({ row }) => <ActionsCell row={row} options={options} />,
+        enableSorting: false,
+        enableHiding: false,
+    }
+}
+
+function ActionsCell<TData extends { id: string | number }>({
+    row,
+    options,
+}: {
+    row: Row<TData>
+    options: ActionsColumnOptions<TData>
+}) {
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon-sm">
+                    <MoreHorizontal className="size-4" />
+                    <span className="sr-only">Open menu</span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                {options.onEdit && (
+                    <DropdownMenuItem onClick={() => options.onEdit!(row.original)}>
+                        <Pencil className="size-3.5 text-muted-foreground" />
+                        Edit
+                    </DropdownMenuItem>
+                )}
+                {options.onDelete && (
+                    <DropdownMenuItem
+                        variant="destructive"
+                        onClick={() => options.onDelete!(row.original)}
+                    >
+                        <Trash2 className="size-3.5" />
+                        Delete
+                    </DropdownMenuItem>
+                )}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    )
+}
diff --git a/shared/data-view/table-view/column-header.tsx b/shared/data-view/table-view/column-header.tsx
new file mode 100644
index 0000000..0adcbec
--- /dev/null
+++ b/shared/data-view/table-view/column-header.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import type { Column } from "@tanstack/react-table"
+import { ArrowDown, ArrowUp, ArrowUpDown, EyeOff, X } from "lucide-react"
+import { cn } from "@/shared/lib/utils"
+import { Button } from "@/shared/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/shared/components/ui/dropdown-menu"
+
+interface ColumnHeaderProps<TData, TValue> extends React.ComponentProps<"div"> {
+    column: Column<TData, TValue>
+    title: string
+}
+
+export function ColumnHeader<TData, TValue>({
+    column,
+    title,
+    className,
+}: ColumnHeaderProps<TData, TValue>) {
+    const isSortable = column.getCanSort()
+    const hasDropdown = isSortable
+
+    return (
+        <div data-slot="column-header" className={cn("flex items-center gap-1", className)}>
+            {hasDropdown ? (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="sm" className="-ml-2 h-8 gap-1">
+                            <span>{title}</span>
+                            {column.getIsSorted() === "desc" ? (
+                                <ArrowDown className="size-3.5" />
+                            ) : column.getIsSorted() === "asc" ? (
+                                <ArrowUp className="size-3.5" />
+                            ) : (
+                                <ArrowUpDown className="size-3.5" />
+                            )}
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start">
+                        {isSortable && (
+                            <>
+                                <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+                                    <ArrowUp className="size-3.5 text-muted-foreground" />
+                                    Asc
+                                </DropdownMenuItem>
+                                <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+                                    <ArrowDown className="size-3.5 text-muted-foreground" />
+                                    Desc
+                                </DropdownMenuItem>
+                                {column.getIsSorted() && (
+                                    <>
+                                        <DropdownMenuSeparator />
+                                        <DropdownMenuItem onClick={() => column.clearSorting()}>
+                                            <X className="size-3.5 text-muted-foreground" />
+                                            Clear
+                                        </DropdownMenuItem>
+                                    </>
+                                )}
+                            </>
+                        )}
+                        {column.getCanHide() && (
+                            <>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+                                    <EyeOff className="size-3.5 text-muted-foreground" />
+                                    Hide
+                                </DropdownMenuItem>
+                            </>
+                        )}
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            ) : (
+                <span className="text-sm font-medium">{title}</span>
+            )}
+        </div>
+    )
+}
diff --git a/shared/data-view/table-view/data-table.tsx b/shared/data-view/table-view/data-table.tsx
new file mode 100644
index 0000000..84e76ca
--- /dev/null
+++ b/shared/data-view/table-view/data-table.tsx
@@ -0,0 +1,127 @@
+"use client"
+
+import {
+    useReactTable,
+    getCoreRowModel,
+    flexRender,
+    type ColumnDef,
+} from "@tanstack/react-table"
+import {
+    Table,
+    TableHeader,
+    TableBody,
+    TableHead,
+    TableRow,
+    TableCell,
+} from "@/shared/components/ui/table"
+import { DataViewProvider } from "./data-view-context"
+ import type { DataViewProps } from "./types"
+import { DataViewPagination } from "./data-view-pagination"
+import { Skeleton } from "@/shared/components/ui/skeleton"
+
+export function DataTable<TData>({
+    columns,
+    data,
+    pagination,
+    sorting = [],
+    onChange,
+    isLoading = false,
+}: DataViewProps<TData>) {
+    const table = useReactTable({
+        data,
+        columns: columns as ColumnDef<TData, unknown>[],
+        getCoreRowModel: getCoreRowModel(),
+        manualPagination: true,
+        manualSorting: true,
+        pageCount: pagination.pageCount,
+        state: {
+            sorting,
+            pagination: {
+                pageIndex: pagination.page - 1,
+                pageSize: pagination.pageSize,
+            },
+        },
+        onSortingChange: (updater) => {
+            const next = typeof updater === "function" ? updater(sorting) : updater
+            onChange({ type: "sorting", sorting: next })
+        },
+        onPaginationChange: (updater) => {
+            const current = { pageIndex: pagination.page - 1, pageSize: pagination.pageSize }
+            const next = typeof updater === "function" ? updater(current) : updater
+            onChange({
+                type: "pagination",
+                pagination: {
+                    page: next.pageIndex + 1,
+                    pageSize: next.pageSize,
+                    pageCount: pagination.pageCount,
+                    total: pagination.total,
+                },
+            })
+        },
+    })
+
+    return (
+        <DataViewProvider
+            pagination={pagination}
+            sorting={sorting}
+            onChange={onChange}
+            isLoading={isLoading}
+        >
+            <div data-slot="data-view" className="flex flex-col gap-4">
+                <div className="rounded-md border">
+                    <Table>
+                        <TableHeader>
+                            {table.getHeaderGroups().map((headerGroup) => (
+                                <TableRow key={headerGroup.id}>
+                                    {headerGroup.headers.map((header) => (
+                                        <TableHead key={header.id}>
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                      header.column.columnDef.header,
+                                                      header.getContext(),
+                                                  )}
+                                        </TableHead>
+                                    ))}
+                                </TableRow>
+                            ))}
+                        </TableHeader>
+                        <TableBody>
+                            {isLoading ? (
+                                Array.from({ length: pagination.pageSize }).map((_, i) => (
+                                    <TableRow key={`skeleton-${i}`}>
+                                        {columns.map((_, j) => (
+                                            <TableCell key={`skeleton-${i}-${j}`}>
+                                                <Skeleton className="h-10 w-full" />
+                                            </TableCell>
+                                        ))}
+                                    </TableRow>
+                                ))
+                            ) : table.getRowModel().rows.length ? (
+                                table.getRowModel().rows.map((row) => (
+                                    <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
+                                        {row.getVisibleCells().map((cell) => (
+                                            <TableCell key={cell.id}>
+                                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                            </TableCell>
+                                        ))}
+                                    </TableRow>
+                                ))
+                            ) : (
+                                <TableRow>
+                                    <TableCell
+                                        colSpan={columns.length}
+                                        className="h-24 text-center text-muted-foreground"
+                                    >
+                                        No results.
+                                    </TableCell>
+                                </TableRow>
+                            )}
+                        </TableBody>
+                    </Table>
+                </div>
+                <DataViewPagination table={table} />
+            </div>
+        </DataViewProvider>
+    )
+}
diff --git a/shared/data-view/table-view/data-view-context.tsx b/shared/data-view/table-view/data-view-context.tsx
new file mode 100644
index 0000000..815d03a
--- /dev/null
+++ b/shared/data-view/table-view/data-view-context.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import { createContext, useContext } from "react"
+import type { DataViewChangeEvent, DataViewPaginationState, DataViewSorting } from "./types"
+
+type DataViewContextValue = {
+    pagination: DataViewPaginationState
+    sorting: DataViewSorting
+    onChange: (event: DataViewChangeEvent) => void
+    isLoading: boolean
+}
+
+const DataViewContext = createContext<DataViewContextValue | null>(null)
+
+export function DataViewProvider({
+    children,
+    ...value
+}: DataViewContextValue & { children: React.ReactNode }) {
+    return (
+        <DataViewContext.Provider value={value}>
+            {children}
+        </DataViewContext.Provider>
+    )
+}
+
+export function useDataView() {
+    const ctx = useContext(DataViewContext)
+    if (!ctx) throw new Error("useDataView must be used within a DataViewProvider")
+    return ctx
+}
diff --git a/shared/data-view/table-view/data-view-pagination.tsx b/shared/data-view/table-view/data-view-pagination.tsx
new file mode 100644
index 0000000..06801cd
--- /dev/null
+++ b/shared/data-view/table-view/data-view-pagination.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import type { Table } from "@tanstack/react-table"
+import {
+    ChevronLeft,
+    ChevronRight,
+    ChevronsLeft,
+    ChevronsRight,
+} from "lucide-react"
+import { Button } from "@/shared/components/ui/button"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/shared/components/ui/select"
+import { useDataView } from "./data-view-context"
+
+const PAGE_SIZE_OPTIONS = [10, 20, 30, 50, 100]
+
+interface DataViewPaginationProps<TData> {
+    table: Table<TData>
+}
+
+export function DataViewPagination<TData>({ table }: DataViewPaginationProps<TData>) {
+    const { pagination } = useDataView()
+
+    return (
+        <div data-slot="data-view-pagination" className="flex items-center justify-between px-2">
+            <div className="text-sm text-muted-foreground">
+                Page {pagination.page} of {pagination.pageCount}
+                {" "}({pagination.total} total)
+            </div>
+            <div className="flex items-center gap-6 lg:gap-8">
+                <div className="flex items-center gap-2">
+                    <p className="text-sm font-medium">Rows per page</p>
+                    <Select
+                        value={String(pagination.pageSize)}
+                        onValueChange={(value) => table.setPageSize(Number(value))}
+                    >
+                        <SelectTrigger size="sm" className="w-17.5">
+                            <SelectValue placeholder={String(pagination.pageSize)} />
+                        </SelectTrigger>
+                        <SelectContent side="top">
+                            {PAGE_SIZE_OPTIONS.map((size) => (
+                                <SelectItem key={size} value={String(size)}>
+                                    {size}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
+                <div className="flex items-center gap-1">
+                    <Button
+                        variant="outline"
+                        size="icon-sm"
+                        onClick={() => table.firstPage()}
+                        disabled={!table.getCanPreviousPage()}
+                    >
+                        <ChevronsLeft className="size-4" />
+                    </Button>
+                    <Button
+                        variant="outline"
+                        size="icon-sm"
+                        onClick={() => table.previousPage()}
+                        disabled={!table.getCanPreviousPage()}
+                    >
+                        <ChevronLeft className="size-4" />
+                    </Button>
+                    <Button
+                        variant="outline"
+                        size="icon-sm"
+                        onClick={() => table.nextPage()}
+                        disabled={!table.getCanNextPage()}
+                    >
+                        <ChevronRight className="size-4" />
+                    </Button>
+                    <Button
+                        variant="outline"
+                        size="icon-sm"
+                        onClick={() => table.lastPage()}
+                        disabled={!table.getCanNextPage()}
+                    >
+                        <ChevronsRight className="size-4" />
+                    </Button>
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/shared/data-view/table-view/index.ts b/shared/data-view/table-view/index.ts
new file mode 100644
index 0000000..2140066
--- /dev/null
+++ b/shared/data-view/table-view/index.ts
@@ -0,0 +1,16 @@
+export { DataTable } from "./data-table"
+export { ColumnHeader } from "./column-header"
+export { createActionsColumn } from "./actions-column"
+export { DataViewProvider, useDataView } from "./data-view-context"
+export { DataViewPagination } from "./data-view-pagination"
+export { useDataTableQuery } from "./use-data-table-query"
+export { dataTableSearchParams, dataTableSearchParamsCache } from "./search-params"
+export type {
+    DataViewProps,
+    DataViewPaginationState,
+    DataViewSorting,
+    DataViewState,
+    DataViewChangeEvent,
+} from "./types"
+export type { DataTableSearchParams } from "./search-params"
+export type { ActionsColumnOptions } from "./actions-column"
diff --git a/shared/data-view/table-view/search-params.ts b/shared/data-view/table-view/search-params.ts
new file mode 100644
index 0000000..2e49baf
--- /dev/null
+++ b/shared/data-view/table-view/search-params.ts
@@ -0,0 +1,19 @@
+"use client"
+
+import {
+    parseAsInteger,
+    parseAsString,
+    parseAsStringEnum,
+    createSearchParamsCache,
+} from "nuqs/server"
+
+export const dataTableSearchParams = {
+    page: parseAsInteger.withDefault(1),
+    per_page: parseAsInteger.withDefault(10),
+    sort_by: parseAsString,
+    sort_order: parseAsStringEnum(["asc", "desc"] as const),
+}
+
+export type DataTableSearchParams = typeof dataTableSearchParams
+
+export const dataTableSearchParamsCache = createSearchParamsCache(dataTableSearchParams)
diff --git a/shared/data-view/table-view/types.ts b/shared/data-view/table-view/types.ts
new file mode 100644
index 0000000..474e9df
--- /dev/null
+++ b/shared/data-view/table-view/types.ts
@@ -0,0 +1,28 @@
+import type { ColumnDef, SortingState } from "@tanstack/react-table"
+
+export type DataViewPaginationState = {
+    page: number
+    pageSize: number
+    pageCount: number
+    total: number
+}
+
+export type DataViewSorting = SortingState
+
+export type DataViewState = {
+    pagination: DataViewPaginationState
+    sorting: DataViewSorting
+}
+
+export type DataViewChangeEvent =
+    | { type: "pagination"; pagination: DataViewPaginationState }
+    | { type: "sorting"; sorting: DataViewSorting }
+
+export type DataViewProps<TData> = {
+    columns: ColumnDef<TData, any>[]
+    data: TData[]
+    pagination: DataViewPaginationState
+    sorting?: DataViewSorting
+    onChange: (event: DataViewChangeEvent) => void
+    isLoading?: boolean
+}
diff --git a/shared/data-view/table-view/use-data-table-query.ts b/shared/data-view/table-view/use-data-table-query.ts
new file mode 100644
index 0000000..8c22343
--- /dev/null
+++ b/shared/data-view/table-view/use-data-table-query.ts
@@ -0,0 +1,86 @@
+"use client"
+
+import { useQueryStates } from "nuqs"
+import { useQuery, useQueryClient, type UseQueryOptions } from "@tanstack/react-query"
+import type { DataViewChangeEvent, DataViewPaginationState, DataViewSorting } from "./types"
+import { dataTableSearchParams } from "./search-params"
+import { type CrudListResponse } from "@repo/api"
+
+type DataTableClient = {
+    list(query?: any): Promise<any>
+}
+
+type UseDataTableQueryOptions<C extends DataTableClient> = {
+    queryKey: string[]
+    client: C
+    queryOptions?: Omit<UseQueryOptions<CrudListResponse<C>>, "queryKey" | "queryFn">
+}
+
+export function useDataTableQuery<C extends DataTableClient>({
+    queryKey,
+    client,
+    queryOptions,
+}: UseDataTableQueryOptions<C>) {
+    const [params, setParams] = useQueryStates(dataTableSearchParams)
+    const _queryKey = [...queryKey, params]
+    const query = useQuery<CrudListResponse<C>>({
+        queryKey: _queryKey,
+        queryFn: () => {
+            const apiParams: Record<string, unknown> = {
+                page: params.page,
+                per_page: params.per_page,
+            }
+            if (params.sort_by) apiParams.sort_by = params.sort_by
+            if (params.sort_order) apiParams.sort_order = params.sort_order
+
+            return client.list(apiParams) as Promise<CrudListResponse<C>>
+        },
+        ...queryOptions,
+    })
+
+    const pagination: DataViewPaginationState = {
+        page: params.page,
+        pageSize: params.per_page,
+        pageCount: (query.data as any)?.meta?.last_page ?? 1,
+        total: (query.data as any)?.meta?.total ?? 0,
+    }
+
+    const sorting: DataViewSorting = params.sort_by
+        ? [{ id: params.sort_by, desc: params.sort_order === "desc" }]
+        : []
+
+    const handleChange = (event: DataViewChangeEvent) => {
+        switch (event.type) {
+            case "pagination":
+                setParams({
+                    page: event.pagination.page,
+                    per_page: event.pagination.pageSize,
+                })
+                break
+            case "sorting": {
+                const sort = event.sorting[0]
+                setParams({
+                    sort_by: sort?.id ?? null,
+                    sort_order: sort ? (sort.desc ? "desc" : "asc") : null,
+                    page: 1,
+                })
+                break
+            }
+        }
+    }
+
+    const queryClient = useQueryClient();
+    const invalidateQuery = () => {
+        queryClient.invalidateQueries({ queryKey: _queryKey })
+    }
+
+    return {
+        ...query,
+        pagination,
+        sorting,
+        params,
+        setParams,
+        handleChange,
+        invalidateQuery,
+    }
+}
diff --git a/hooks/.gitkeep b/shared/hooks/.gitkeep
similarity index 100%
rename from hooks/.gitkeep
rename to shared/hooks/.gitkeep
diff --git a/shared/hooks/use-auth.ts b/shared/hooks/use-auth.ts
new file mode 100644
index 0000000..20e81d4
--- /dev/null
+++ b/shared/hooks/use-auth.ts
@@ -0,0 +1,24 @@
+"use client"
+
+import { useEffect } from "react"
+import { useAuthStore } from "@/shared/stores/auth-store"
+
+/**
+ * Hydrates auth state from server cookies on mount and exposes auth helpers.
+ */
+export function useAuth() {
+  const store = useAuthStore()
+
+  useEffect(() => {
+    store.hydrate()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return {
+    token: store.token,
+    user: store.user,
+    isAuthenticated: store.isAuthenticated,
+    login: store.login,
+    logout: store.logout,
+  }
+}
diff --git a/shared/hooks/use-form-mutation.ts b/shared/hooks/use-form-mutation.ts
new file mode 100644
index 0000000..6de4c57
--- /dev/null
+++ b/shared/hooks/use-form-mutation.ts
@@ -0,0 +1,22 @@
+"use client"
+
+import { useMutation, type UseMutationOptions } from "@tanstack/react-query"
+import type { FieldValues, UseFormReturn } from "react-hook-form"
+import { ApiError } from "@repo/api"
+
+export function useFormMutation<TValues extends FieldValues, TResponse = unknown>(
+    form: UseFormReturn<TValues>,
+    options: UseMutationOptions<TResponse, Error, TValues>,
+) {
+    return useMutation<TResponse, Error, TValues>({
+        ...options,
+        onError: (err, vars,values, ctx) => {
+            if (err instanceof ApiError && err.validationErrors) {
+                Object.entries(err.validationErrors).forEach(([field, msgs]) => {
+                    form.setError(field as any, { message: msgs[0] })
+                })
+            }
+            options.onError?.(err, vars, values, ctx,)
+        },
+    })
+}
diff --git a/shared/hooks/use-mobile.ts b/shared/hooks/use-mobile.ts
new file mode 100644
index 0000000..2b0fe1d
--- /dev/null
+++ b/shared/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/shared/hooks/use-resource-form.ts b/shared/hooks/use-resource-form.ts
new file mode 100644
index 0000000..a7f7457
--- /dev/null
+++ b/shared/hooks/use-resource-form.ts
@@ -0,0 +1,61 @@
+"use client"
+
+import { useEffect } from "react"
+import { useForm, type DefaultValues, type FieldValues, type UseFormReturn } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useQuery, type QueryKey } from "@tanstack/react-query"
+import type { ZodType } from "zod"
+
+type UseResourceFormOptions<TFormValues extends FieldValues, TApiData = unknown> = {
+    schema: ZodType<TFormValues, any, any>
+    defaultValues: DefaultValues<TFormValues>
+    resourceId?: string | null
+    initialize?: (id: string) => Promise<TApiData>
+    mapToFormValues: (data: TApiData) => TFormValues
+    initialData?: TApiData | null
+    queryKey?: QueryKey
+}
+
+type UseResourceFormReturn<TFormValues extends FieldValues> = {
+    form: UseFormReturn<TFormValues>
+    isEditing: boolean
+    isInitializing: boolean
+}
+
+export function useResourceForm<TFormValues extends FieldValues, TApiData = unknown>({
+    schema,
+    defaultValues,
+    resourceId,
+    initialize,
+    mapToFormValues,
+    initialData,
+    queryKey,
+}: UseResourceFormOptions<TFormValues, TApiData>): UseResourceFormReturn<TFormValues> {
+    const isEditing = !!resourceId
+
+    const { data: queriedData, isLoading: isQueryLoading } = useQuery<TApiData>({
+        queryKey: queryKey ?? ["resource", resourceId],
+        queryFn: () => initialize!(resourceId!),
+        enabled: isEditing && !!initialize,
+    })
+
+    const resolvedData = queriedData ?? (isEditing ? initialData : undefined)
+
+    const form = useForm<TFormValues>({
+        resolver: zodResolver(schema) as any,
+        defaultValues,
+    })
+
+    useEffect(() => {
+        if (!isEditing) {
+            form.reset(defaultValues)
+            return
+        }
+
+        if (resolvedData) {
+            form.reset(mapToFormValues(resolvedData) as any)
+        }
+    }, [isEditing, resolvedData]) // eslint-disable-line react-hooks/exhaustive-deps
+
+    return { form, isEditing, isInitializing: isEditing && !!initialize && isQueryLoading }
+}
diff --git a/lib/.gitkeep b/shared/lib/.gitkeep
similarity index 100%
rename from lib/.gitkeep
rename to shared/lib/.gitkeep
diff --git a/shared/lib/utils.ts b/shared/lib/utils.ts
new file mode 100644
index 0000000..2b9886f
--- /dev/null
+++ b/shared/lib/utils.ts
@@ -0,0 +1,26 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export type RelationFieldValue = { value: string; label: string } | null
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+/**
+ * Build a `{ value, label }` relation object from an API id + name pair.
+ * Returns `null` when `id` is absent so the field stays clearable.
+ */
+export function toRelation(id: unknown, name?: string): RelationFieldValue {
+  if (id == null) return null
+  if (typeof id === "object" && id !== null && "value" in id && "label" in id) {
+    return id as { value: string; label: string }
+  }
+  return { value: String(id), label: name ?? String(id) }
+}
+
+/** Extract a numeric ID from a relation object for API payloads. */
+export function toId(relation: RelationFieldValue | undefined): number | undefined {
+  return relation ? Number(relation.value) : undefined
+}
+
diff --git a/shared/stores/app-store.ts b/shared/stores/app-store.ts
new file mode 100644
index 0000000..59db275
--- /dev/null
+++ b/shared/stores/app-store.ts
@@ -0,0 +1,23 @@
+import { create } from "zustand"
+
+type AppStore = {
+  lastLoginEmail: string
+  sidebarOpen: boolean
+  setLastLoginEmail: (email: string) => void
+  setSidebarOpen: (open: boolean) => void
+  reset: () => void
+}
+
+const initialState = {
+  lastLoginEmail: "",
+  sidebarOpen: true,
+}
+
+const useAppStore = create<AppStore>()((set) => ({
+  ...initialState,
+  setLastLoginEmail: (email) => set({ lastLoginEmail: email }),
+  setSidebarOpen: (open) => set({ sidebarOpen: open }),
+  reset: () => set(initialState),
+}))
+
+export { useAppStore }
\ No newline at end of file
diff --git a/shared/stores/auth-store.ts b/shared/stores/auth-store.ts
new file mode 100644
index 0000000..e99198f
--- /dev/null
+++ b/shared/stores/auth-store.ts
@@ -0,0 +1,90 @@
+import { create } from "zustand"
+import type { AuthUser } from "@repo/api"
+import { createApi } from "@repo/api"
+import {
+  setAuthCookies,
+  clearAuthCookies,
+  getAuthCookies,
+} from "@/modules/auth/auth.actions"
+
+type AuthState = {
+  token: string | undefined
+  user: AuthUser | undefined
+  isAuthenticated: boolean
+}
+
+type AuthActions = {
+  login: (token: string, user: AuthUser, expiresIn?: number) => Promise<void>
+  logout: () => Promise<void>
+  hydrate: () => Promise<void>
+}
+
+type AuthStore = AuthState & AuthActions
+
+/**
+ * Synchronously read auth credentials from cookies on the client.
+ * Returns undefined on the server (document is not available).
+ */
+function readCookieValue(name: string): string | undefined {
+  if (typeof document === "undefined") return undefined
+  const match = document.cookie.match(new RegExp(`(?:^|;\\s*)${name}=([^;]*)`))
+  return match ? decodeURIComponent(match[1]) : undefined
+}
+
+function readInitialToken(): string | undefined {
+  return readCookieValue("auth_token")
+}
+
+function readInitialUser(): AuthUser | undefined {
+  const raw = readCookieValue("auth_user")
+  if (!raw) return undefined
+  try {
+    return JSON.parse(raw) as AuthUser
+  } catch {
+    return undefined
+  }
+}
+
+const useAuthStore = create<AuthStore>()((set, get) => {
+  const initialToken = readInitialToken()
+  const initialUser = readInitialUser()
+  return {
+  token: initialToken,
+  user: initialUser,
+  isAuthenticated: !!(initialToken && initialUser),
+
+  login: async (token, user, expiresIn?) => {
+    await setAuthCookies(token, user, expiresIn)
+    set({ token, user, isAuthenticated: true })
+  },
+
+  logout: async () => {
+    const { token } = get()
+    if (token) {
+      try {
+        const authedApi = createApi({
+          headers: { Authorization: `Bearer ${token}` },
+        })
+        await authedApi.auth.logout()
+      } catch {
+        // proceed with local cleanup even if the API call fails
+      }
+    }
+    await clearAuthCookies()
+    set({ token: undefined, user: undefined, isAuthenticated: false })
+  },
+
+  hydrate: async () => {
+    const { token, user } = await getAuthCookies()
+    if (token && user) {
+      set({ token, user, isAuthenticated: true })
+    } else {
+      await clearAuthCookies()
+      set({ token: undefined, user: undefined, isAuthenticated: false })
+    }
+  },
+  }
+})
+
+export { useAuthStore }
+export type { AuthUser }
diff --git a/shared/useApi.ts b/shared/useApi.ts
new file mode 100644
index 0000000..4965539
--- /dev/null
+++ b/shared/useApi.ts
@@ -0,0 +1,11 @@
+import { useMemo } from "react";
+import { createApi } from "@repo/api";
+import { useAuthStore } from "./stores/auth-store";
+
+export const useAuthApi = () => {
+    const token = useAuthStore(s => s.token)
+    return useMemo(
+        () => createApi({ headers: token ? { Authorization: `Bearer ${token}` } : undefined }),
+        [token],
+    )
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index dc2b03b..e1a5940 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -30,5 +30,5 @@
     ".next/types/**/*.ts",
     ".next/dev/types/**/*.ts"
   ],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "cypress"]
 }