diff --git a/README.md b/README.md
index 5a71388..4a0262c 100644
--- a/README.md
+++ b/README.md
@@ -22,18 +22,18 @@ Drag fields onto an open canvas, connect them like nodes, watch responses light
 
 ## Tech stack
 
-| Layer | Choice |
-| --- | --- |
-| Monorepo | Turborepo + pnpm workspaces |
-| Web app | Next.js 16 (App Router, Turbopack), React 19, Tailwind v4, Radix UI primitives, Motion |
-| Canvas builder | `@xyflow/react` |
-| Charts | Recharts (lazy-loaded per route) |
-| API | Express 5 + tRPC 11 (OpenAPI generated via `trpc-to-openapi`) |
-| Auth | Better Auth with email/password, Google OAuth, GitHub OAuth, signed cookie cache |
-| DB | PostgreSQL via Drizzle ORM, `pg` connection pool, migrations via `drizzle-kit` |
-| Validation | Zod (shared between client, server, and OpenAPI schema) |
-| State / data | TanStack Query (tRPC React Query adapter) |
-| Logging | Winston |
+| Layer          | Choice                                                                                 |
+| -------------- | -------------------------------------------------------------------------------------- |
+| Monorepo       | Turborepo + pnpm workspaces                                                            |
+| Web app        | Next.js 16 (App Router, Turbopack), React 19, Tailwind v4, Radix UI primitives, Motion |
+| Canvas builder | `@xyflow/react`                                                                        |
+| Charts         | Recharts (lazy-loaded per route)                                                       |
+| API            | Express 5 + tRPC 11 (OpenAPI generated via `trpc-to-openapi`)                          |
+| Auth           | Better Auth with email/password, Google OAuth, GitHub OAuth, signed cookie cache       |
+| DB             | PostgreSQL via Drizzle ORM, `pg` connection pool, migrations via `drizzle-kit`         |
+| Validation     | Zod (shared between client, server, and OpenAPI schema)                                |
+| State / data   | TanStack Query (tRPC React Query adapter)                                              |
+| Logging        | Winston                                                                                |
 
 ## Architecture
 
@@ -123,12 +123,12 @@ pnpm dev
 
 This boots, in parallel:
 
-| URL | What |
-| --- | --- |
-| `http://localhost:3000` | Next.js studio (web) |
-| `http://localhost:8000/trpc` | tRPC HTTP endpoint |
-| `http://localhost:8000/docs` | Auto-generated Scalar API reference |
-| `http://localhost:8000/openapi.json` | OpenAPI 3.1 spec |
+| URL                                  | What                                |
+| ------------------------------------ | ----------------------------------- |
+| `http://localhost:3000`              | Next.js studio (web)                |
+| `http://localhost:8000/trpc`         | tRPC HTTP endpoint                  |
+| `http://localhost:8000/docs`         | Auto-generated Scalar API reference |
+| `http://localhost:8000/openapi.json` | OpenAPI 3.1 spec                    |
 
 Sign up at `/signUp`, build a form, publish it, share `/forms/<id>`, watch responses populate `/dashboard/analytics`.
 
@@ -136,15 +136,15 @@ Sign up at `/signUp`, build a form, publish it, share `/forms/<id>`, watch respo
 
 All scripts are turbo-orchestrated and `dotenv -- ...` wrapped so workspaces share the root env.
 
-| Script | What it does |
-| --- | --- |
-| `pnpm dev` | Run every workspace's dev task |
-| `pnpm build` | Build the API and the web app for production |
-| `pnpm lint` | ESLint across all workspaces (zero-warning) |
-| `pnpm check-types` | TypeScript no-emit type-check |
-| `pnpm format` | Prettier across `**/*.{ts,tsx,md}` |
+| Script             | What it does                                     |
+| ------------------ | ------------------------------------------------ |
+| `pnpm dev`         | Run every workspace's dev task                   |
+| `pnpm build`       | Build the API and the web app for production     |
+| `pnpm lint`        | ESLint across all workspaces (zero-warning)      |
+| `pnpm check-types` | TypeScript no-emit type-check                    |
+| `pnpm format`      | Prettier across `**/*.{ts,tsx,md}`               |
 | `pnpm db:generate` | Generate a Drizzle migration from schema changes |
-| `pnpm db:migrate` | Apply pending migrations |
+| `pnpm db:migrate`  | Apply pending migrations                         |
 
 Filter to a single workspace with `pnpm -F web <script>` or `pnpm -F @repo/api <script>`.
 
diff --git a/apps/api/src/server.ts b/apps/api/src/server.ts
index 8d19a62..301038b 100644
--- a/apps/api/src/server.ts
+++ b/apps/api/src/server.ts
@@ -6,7 +6,7 @@ import rateLimit, { ipKeyGenerator } from "express-rate-limit";
 
 import * as trpcExpress from "@trpc/server/adapters/express";
 import { generateOpenApiDocument, createOpenApiExpressMiddleware } from "trpc-to-openapi";
-import cookieParser from 'cookie-parser'
+import cookieParser from "cookie-parser";
 
 import { serverRouter, createContext } from "@repo/trpc/server";
 import { auth } from "@repo/trpc/server/auth";
@@ -73,7 +73,7 @@ app.use(
       if (req.headers["x-no-compression"]) return false;
       return compression.filter(req, res);
     },
-  })
+  }),
 );
 
 app.use(cookieParser());
@@ -125,7 +125,7 @@ const authGlobalLimiter = rateLimit({
 // HTTP path includes the procedure name, so we can match on it.
 app.use(
   ["/trpc/analytics.recordView", "/trpc/analytics.recordFieldAnswer", "/trpc/form.submitForm"],
-  publicWriteLimiter
+  publicWriteLimiter,
 );
 
 // Better Auth handler must be mounted BEFORE express.json().
diff --git a/apps/api/tsup.config.ts b/apps/api/tsup.config.ts
index b808a20..ed6c050 100644
--- a/apps/api/tsup.config.ts
+++ b/apps/api/tsup.config.ts
@@ -13,6 +13,6 @@ export default defineConfig({
   minify: false,
   sourcemap: false,
   banner: {
-    js: `import { createRequire } from 'module'; const require = createRequire(import.meta.url);`
-  }
+    js: `import { createRequire } from 'module'; const require = createRequire(import.meta.url);`,
+  },
 });
diff --git a/apps/web/app/(auth)/layout.tsx b/apps/web/app/(auth)/layout.tsx
index 0ee3a04..d5cafe1 100644
--- a/apps/web/app/(auth)/layout.tsx
+++ b/apps/web/app/(auth)/layout.tsx
@@ -30,16 +30,8 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
             className="relative inline-flex items-center gap-3 z-10"
             aria-label="CanvasFlow home"
           >
-            <Image
-              src="/logo.svg"
-              alt=""
-              width={32}
-              height={32}
-              className="object-contain"
-            />
-            <span className="cf-display text-[22px] leading-none">
-              CanvasFlow
-            </span>
+            <Image src="/logo.svg" alt="" width={32} height={32} className="object-contain" />
+            <span className="cf-display text-[22px] leading-none">CanvasFlow</span>
           </Link>
 
           {/* big serif quote */}
@@ -50,8 +42,8 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
               <span className="block">in golden hour.</span>
             </h2>
             <p className="mt-5 max-w-sm text-[14.5px] leading-relaxed text-[color:var(--cf-ink-soft)]">
-              A studio for makers of beautiful data. Sketch on an open canvas,
-              ship durable forms, watch responses land in real time.
+              A studio for makers of beautiful data. Sketch on an open canvas, ship durable forms,
+              watch responses land in real time.
             </p>
           </div>
 
diff --git a/apps/web/app/(auth)/signIn/page.tsx b/apps/web/app/(auth)/signIn/page.tsx
index a8bcaa8..d9c3f30 100644
--- a/apps/web/app/(auth)/signIn/page.tsx
+++ b/apps/web/app/(auth)/signIn/page.tsx
@@ -59,17 +59,13 @@ export default function SignInPage() {
     <div className="flex flex-col justify-between h-full w-full">
       {/* top eyebrow */}
       <div className="flex justify-between items-center">
-        <span className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-          Studio · Sign in
-        </span>
+        <span className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Studio · Sign in</span>
       </div>
 
       {/* form */}
       <div className="my-auto py-8 w-full">
         <div className="mx-auto w-full max-w-md">
-          <h1 className="cf-display text-[40px] sm:text-[48px] leading-[0.95]">
-            Welcome back
-          </h1>
+          <h1 className="cf-display text-[40px] sm:text-[48px] leading-[0.95]">Welcome back</h1>
           <p className="mt-3 text-[14.5px] leading-relaxed text-[color:var(--cf-ink-soft)]">
             Pick up where you left off. Sign in to open your studio.
           </p>
@@ -165,9 +161,7 @@ function Field({
 }) {
   return (
     <div>
-      <label className="cf-eyebrow text-[color:var(--cf-ink-soft)] mb-2 block">
-        {label}
-      </label>
+      <label className="cf-eyebrow text-[color:var(--cf-ink-soft)] mb-2 block">{label}</label>
       <input
         type={type}
         placeholder={placeholder}
@@ -175,11 +169,7 @@ function Field({
         {...register}
         className="w-full bg-white rounded-md ring-1 ring-[color:var(--cf-line-strong)] focus:ring-2 focus:ring-[color:var(--cf-orange)] focus:outline-none px-4 h-[46px] text-[14.5px] text-[color:var(--cf-ink)] placeholder:text-[color:var(--cf-ink-soft)]/55 transition-shadow"
       />
-      {error && (
-        <p className="text-[12px] text-[color:var(--cf-orange)] mt-1.5 ml-0.5">
-          {error}
-        </p>
-      )}
+      {error && <p className="text-[12px] text-[color:var(--cf-orange)] mt-1.5 ml-0.5">{error}</p>}
     </div>
   );
 }
@@ -204,10 +194,22 @@ function SocialButton({
     >
       {provider === "google" ? (
         <svg className="size-4" viewBox="0 0 24 24">
-          <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
-          <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
-          <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
-          <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+          <path
+            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
+            fill="#4285F4"
+          />
+          <path
+            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+            fill="#34A853"
+          />
+          <path
+            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+            fill="#FBBC05"
+          />
+          <path
+            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+            fill="#EA4335"
+          />
         </svg>
       ) : (
         <svg className="size-4" viewBox="0 0 24 24" fill="currentColor">
diff --git a/apps/web/app/(auth)/signUp/page.tsx b/apps/web/app/(auth)/signUp/page.tsx
index f5774d9..833aacc 100644
--- a/apps/web/app/(auth)/signUp/page.tsx
+++ b/apps/web/app/(auth)/signUp/page.tsx
@@ -60,20 +60,15 @@ export default function SignUpPage() {
     <div className="flex flex-col justify-between h-full w-full">
       {/* top eyebrow */}
       <div className="flex justify-between items-center">
-        <span className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-          Studio · Sign up
-        </span>
+        <span className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Studio · Sign up</span>
       </div>
 
       {/* form */}
       <div className="my-auto py-8 w-full">
         <div className="mx-auto w-full max-w-md">
-          <h1 className="cf-display text-[40px] sm:text-[48px] leading-[0.95]">
-            Open your studio
-          </h1>
+          <h1 className="cf-display text-[40px] sm:text-[48px] leading-[0.95]">Open your studio</h1>
           <p className="mt-3 text-[14.5px] leading-relaxed text-[color:var(--cf-ink-soft)]">
-            Free to start, no card required. Sketch on an open canvas in
-            minutes.
+            Free to start, no card required. Sketch on an open canvas in minutes.
           </p>
 
           <form onSubmit={handleSubmit(onSubmit)} className="mt-9 space-y-5">
@@ -176,9 +171,7 @@ function Field({
 }) {
   return (
     <div>
-      <label className="cf-eyebrow text-[color:var(--cf-ink-soft)] mb-2 block">
-        {label}
-      </label>
+      <label className="cf-eyebrow text-[color:var(--cf-ink-soft)] mb-2 block">{label}</label>
       <input
         type={type}
         placeholder={placeholder}
@@ -186,11 +179,7 @@ function Field({
         {...register}
         className="w-full bg-white rounded-md ring-1 ring-[color:var(--cf-line-strong)] focus:ring-2 focus:ring-[color:var(--cf-orange)] focus:outline-none px-4 h-[46px] text-[14.5px] text-[color:var(--cf-ink)] placeholder:text-[color:var(--cf-ink-soft)]/55 transition-shadow"
       />
-      {error && (
-        <p className="text-[12px] text-[color:var(--cf-orange)] mt-1.5 ml-0.5">
-          {error}
-        </p>
-      )}
+      {error && <p className="text-[12px] text-[color:var(--cf-orange)] mt-1.5 ml-0.5">{error}</p>}
     </div>
   );
 }
@@ -215,10 +204,22 @@ function SocialButton({
     >
       {provider === "google" ? (
         <svg className="size-4" viewBox="0 0 24 24">
-          <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
-          <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
-          <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
-          <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+          <path
+            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
+            fill="#4285F4"
+          />
+          <path
+            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+            fill="#34A853"
+          />
+          <path
+            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+            fill="#FBBC05"
+          />
+          <path
+            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+            fill="#EA4335"
+          />
         </svg>
       ) : (
         <svg className="size-4" viewBox="0 0 24 24" fill="currentColor">
diff --git a/apps/web/app/dashboard/analytics/[formId]/page.tsx b/apps/web/app/dashboard/analytics/[formId]/page.tsx
index 987b08d..febdf89 100644
--- a/apps/web/app/dashboard/analytics/[formId]/page.tsx
+++ b/apps/web/app/dashboard/analytics/[formId]/page.tsx
@@ -28,58 +28,38 @@ import { useGetMe } from "~/hooks/api/user";
 // modal. Loading them on the client also keeps SSR fast.
 const DowBreakdown = dynamic(
   () => import("~/components/analytics/DowBreakdown").then((m) => m.DowBreakdown),
-  { ssr: false, loading: () => <ChartSkeleton title="Day of week" /> }
+  { ssr: false, loading: () => <ChartSkeleton title="Day of week" /> },
 );
 const QuestionDistribution = dynamic(
-  () =>
-    import("~/components/analytics/QuestionDistribution").then(
-      (m) => m.QuestionDistribution
-    ),
-  { ssr: false, loading: () => <ChartSkeleton title="Question breakdown" /> }
+  () => import("~/components/analytics/QuestionDistribution").then((m) => m.QuestionDistribution),
+  { ssr: false, loading: () => <ChartSkeleton title="Question breakdown" /> },
 );
 const ResponseTimeline = dynamic(
-  () =>
-    import("~/components/analytics/ResponseTimeline").then(
-      (m) => m.ResponseTimeline
-    ),
+  () => import("~/components/analytics/ResponseTimeline").then((m) => m.ResponseTimeline),
   {
     ssr: false,
     loading: () => <ChartSkeleton title="Response timeline" className="lg:col-span-2" />,
-  }
+  },
 );
 const DeviceBreakdown = dynamic(
-  () =>
-    import("~/components/analytics/DeviceBreakdown").then(
-      (m) => m.DeviceBreakdown
-    ),
-  { ssr: false, loading: () => <ChartSkeleton title="Device breakdown" /> }
+  () => import("~/components/analytics/DeviceBreakdown").then((m) => m.DeviceBreakdown),
+  { ssr: false, loading: () => <ChartSkeleton title="Device breakdown" /> },
 );
 const FieldCompletionRates = dynamic(
-  () =>
-    import("~/components/analytics/FieldCompletionRates").then(
-      (m) => m.FieldCompletionRates
-    ),
-  { ssr: false, loading: () => <ChartSkeleton title="Field completion" /> }
+  () => import("~/components/analytics/FieldCompletionRates").then((m) => m.FieldCompletionRates),
+  { ssr: false, loading: () => <ChartSkeleton title="Field completion" /> },
 );
 const TrafficSources = dynamic(
-  () =>
-    import("~/components/analytics/TrafficSources").then((m) => m.TrafficSources),
-  { ssr: false, loading: () => <ChartSkeleton title="Traffic sources" /> }
+  () => import("~/components/analytics/TrafficSources").then((m) => m.TrafficSources),
+  { ssr: false, loading: () => <ChartSkeleton title="Traffic sources" /> },
 );
 // UpgradeModal is only shown on Free-tier access — load it on demand.
 const UpgradeModal = dynamic(
-  () =>
-    import("~/components/analytics/UpgradeModal").then((m) => m.UpgradeModal),
-  { ssr: false }
+  () => import("~/components/analytics/UpgradeModal").then((m) => m.UpgradeModal),
+  { ssr: false },
 );
 
-function ChartSkeleton({
-  title,
-  className,
-}: {
-  title: string;
-  className?: string;
-}) {
+function ChartSkeleton({ title, className }: { title: string; className?: string }) {
   return (
     <div
       className={`bg-[color:var(--cf-cream-2)] rounded-xl ring-1 ring-[color:var(--cf-line)] p-5 min-h-[260px] flex flex-col ${className ?? ""}`}
@@ -117,17 +97,11 @@ function StatCard({
     >
       <div className="flex items-start justify-between">
         <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">{label}</p>
-        {Icon && (
-          <Icon className="size-4 text-[color:var(--cf-orange)]" />
-        )}
+        {Icon && <Icon className="size-4 text-[color:var(--cf-orange)]" />}
       </div>
-      <p className="mt-5 cf-display text-[30px] leading-none tabular-nums">
-        {value}
-      </p>
+      <p className="mt-5 cf-display text-[30px] leading-none tabular-nums">{value}</p>
       {sub && (
-        <p className="mt-2 text-[11px] text-[color:var(--cf-ink-soft)] leading-relaxed">
-          {sub}
-        </p>
+        <p className="mt-2 text-[11px] text-[color:var(--cf-ink-soft)] leading-relaxed">{sub}</p>
       )}
     </div>
   );
@@ -146,20 +120,17 @@ function PeriodCard({
 }) {
   // delta vs the prior (older) period — positive means growth
   const delta = prior !== undefined ? count - prior : 0;
-  const TrendIcon =
-    delta > 0 ? TrendingUp : delta < 0 ? TrendingDown : Minus;
+  const TrendIcon = delta > 0 ? TrendingUp : delta < 0 ? TrendingDown : Minus;
   const trendColor =
     delta > 0
       ? "text-[color:var(--cf-orange)]"
       : delta < 0
-      ? "text-[#c1281d]"
-      : "text-[color:var(--cf-ink-soft)]";
+        ? "text-[#c1281d]"
+        : "text-[color:var(--cf-ink-soft)]";
   return (
     <div className="bg-[color:var(--cf-cream-2)] rounded-xl ring-1 ring-[color:var(--cf-line)] p-5">
       <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">{label}</p>
-      <p className="mt-4 cf-display text-[28px] leading-none tabular-nums">
-        {count}
-      </p>
+      <p className="mt-4 cf-display text-[28px] leading-none tabular-nums">{count}</p>
       <p className="mt-1 text-[11px] text-[color:var(--cf-ink-soft)]">
         response{count !== 1 ? "s" : ""}
       </p>
@@ -169,9 +140,7 @@ function PeriodCard({
           <span>current window</span>
         </div>
       ) : prior !== undefined ? (
-        <div
-          className={`mt-2 flex items-center gap-1 text-[11px] font-mono ${trendColor}`}
-        >
+        <div className={`mt-2 flex items-center gap-1 text-[11px] font-mono ${trendColor}`}>
           <TrendIcon className="size-3" />
           <span className="tabular-nums">
             {delta > 0 ? "+" : ""}
@@ -202,9 +171,7 @@ function ProAnalyticsPage() {
   const { hasDetailedAnalytics, isLoading: meLoading } = useGetMe();
   const { form, isLoading: formLoading } = useGetFormById(formId);
   const { proAnalytics, isLoading: proLoading } = useGetProAnalytics(formId);
-  const { analytics, isLoading: analyticsLoading } = useGetFormAnalytics(
-    formId
-  );
+  const { analytics, isLoading: analyticsLoading } = useGetFormAnalytics(formId);
 
   const deviceData = useMemo(() => {
     const dv = analytics?.deviceViews ?? [];
@@ -238,9 +205,7 @@ function ProAnalyticsPage() {
   if (!hasDetailedAnalytics) {
     return (
       <div className="min-h-[60vh]">
-        <UpgradeModal
-          onClose={() => router.push(`/dashboard/analytics?form=${formId}`)}
-        />
+        <UpgradeModal onClose={() => router.push(`/dashboard/analytics?form=${formId}`)} />
       </div>
     );
   }
@@ -282,9 +247,7 @@ function ProAnalyticsPage() {
   const totalResponses = analytics?.totalResponses ?? trend30d;
   const totalViews = analytics?.totalViews ?? 0;
   const completionRate =
-    analytics?.completionRate != null
-      ? analytics.completionRate.toFixed(1) + "%"
-      : "—";
+    analytics?.completionRate != null ? analytics.completionRate.toFixed(1) + "%" : "—";
   const avgPerDay = analytics?.avgSubmissionsPerDay ?? 0;
   const dailyTrends = analytics?.dailyTrends ?? [];
 
@@ -305,32 +268,20 @@ function ProAnalyticsPage() {
           <Sparkles className="size-4 fill-current" />
           <p className="cf-eyebrow">Pro+ analytics</p>
         </div>
-        <h1 className="cf-display text-[36px] sm:text-[44px] leading-[0.95]">
-          {form.title}
-        </h1>
+        <h1 className="cf-display text-[36px] sm:text-[44px] leading-[0.95]">{form.title}</h1>
         <p className="mt-3 text-[13px] font-mono text-[color:var(--cf-ink-soft)]">
           {form.isPublished ? "Published" : "Draft"} ·{" "}
-          <span className="text-[color:var(--cf-ink)] tabular-nums">
-            {totalResponses}
-          </span>{" "}
-          total response{totalResponses !== 1 ? "s" : ""}
+          <span className="text-[color:var(--cf-ink)] tabular-nums">{totalResponses}</span> total
+          response{totalResponses !== 1 ? "s" : ""}
         </p>
       </div>
 
       {/* Row 1 — core metrics */}
       <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-6 gap-4">
         <StatCard label="Total responses" value={totalResponses} icon={Layers} />
-        <StatCard
-          label="Completion rate"
-          value={completionRate}
-          icon={TrendingUp}
-        />
+        <StatCard label="Completion rate" value={completionRate} icon={TrendingUp} />
         <StatCard label="Total views" value={totalViews} icon={Clock} />
-        <StatCard
-          label="Avg / day"
-          value={avgPerDay.toFixed(1)}
-          icon={Activity}
-        />
+        <StatCard label="Avg / day" value={avgPerDay.toFixed(1)} icon={Activity} />
         <StatCard
           label="Avg time spent"
           value={formatDuration(avgTimeSpentMs)}
@@ -349,42 +300,24 @@ function ProAnalyticsPage() {
 
       {/* Row 2 — period comparison + velocity + peak day */}
       <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
-        <PeriodCard
-          label="Last 30 days"
-          count={trend30d}
-          prior={new31_60}
-          isCurrent
-        />
-        <PeriodCard
-          label="Days 31–60"
-          count={new31_60}
-          prior={new61_90}
-        />
-        <PeriodCard
-          label="Days 61–90"
-          count={new61_90}
-        />
+        <PeriodCard label="Last 30 days" count={trend30d} prior={new31_60} isCurrent />
+        <PeriodCard label="Days 31–60" count={new31_60} prior={new61_90} />
+        <PeriodCard label="Days 61–90" count={new61_90} />
 
         <div className="bg-[color:var(--cf-cream-2)] rounded-xl ring-1 ring-[color:var(--cf-line)] p-5">
           <div className="flex items-start justify-between">
-            <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-              Launch velocity
-            </p>
+            <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Launch velocity</p>
             <Zap className="size-4 text-[color:var(--cf-orange)]" />
           </div>
           <p className="mt-4 cf-display text-[28px] leading-none tabular-nums">
             {velocityFirst24h}
           </p>
-          <p className="mt-1 text-[11px] text-[color:var(--cf-ink-soft)]">
-            responses in first 24h
-          </p>
+          <p className="mt-1 text-[11px] text-[color:var(--cf-ink-soft)]">responses in first 24h</p>
         </div>
 
         <div className="bg-[color:var(--cf-cream-2)] rounded-xl ring-1 ring-[color:var(--cf-line)] p-5">
           <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Peak day</p>
-          <p className="mt-4 cf-display text-[24px] leading-tight">
-            {peakDay ?? "—"}
-          </p>
+          <p className="mt-4 cf-display text-[24px] leading-tight">{peakDay ?? "—"}</p>
           <p className="mt-1 text-[11px] text-[color:var(--cf-ink-soft)] leading-relaxed">
             {medianResponseTime != null
               ? `Median: ${
@@ -399,10 +332,7 @@ function ProAnalyticsPage() {
 
       {/* Row 3 — timeline + device */}
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
-        <ResponseTimeline
-          totalResponses={totalResponses}
-          trends={dailyTrends}
-        />
+        <ResponseTimeline totalResponses={totalResponses} trends={dailyTrends} />
         <DeviceBreakdown totalViews={totalViews} deviceData={deviceData} />
       </div>
 
@@ -413,10 +343,7 @@ function ProAnalyticsPage() {
       </div>
 
       {/* Row 5 — traffic sources */}
-      <TrafficSources
-        topReferrers={topReferrers}
-        utmSources={utmSources}
-      />
+      <TrafficSources topReferrers={topReferrers} utmSources={utmSources} />
 
       {/* Row 6 — question distribution */}
       <QuestionDistribution questionDistribution={questionDistribution} />
diff --git a/apps/web/app/dashboard/analytics/page.tsx b/apps/web/app/dashboard/analytics/page.tsx
index 48e1b1a..67f354f 100644
--- a/apps/web/app/dashboard/analytics/page.tsx
+++ b/apps/web/app/dashboard/analytics/page.tsx
@@ -1,12 +1,6 @@
 "use client";
 
-import React, {
-  Suspense,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import React, { Suspense, useCallback, useEffect, useMemo, useState } from "react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -26,23 +20,16 @@ import { SubmissionsTable } from "~/components/analytics/SubmissionsTable";
 // Lazy-load the recharts-backed widgets and the on-demand modal. Keeps the
 // initial route bundle lean — recharts alone is ~140kb gzipped.
 const ResponseTimeline = dynamic(
-  () =>
-    import("~/components/analytics/ResponseTimeline").then(
-      (m) => m.ResponseTimeline
-    ),
-  { ssr: false }
+  () => import("~/components/analytics/ResponseTimeline").then((m) => m.ResponseTimeline),
+  { ssr: false },
 );
 const DeviceBreakdown = dynamic(
-  () =>
-    import("~/components/analytics/DeviceBreakdown").then(
-      (m) => m.DeviceBreakdown
-    ),
-  { ssr: false }
+  () => import("~/components/analytics/DeviceBreakdown").then((m) => m.DeviceBreakdown),
+  { ssr: false },
 );
 const UpgradeModal = dynamic(
-  () =>
-    import("~/components/analytics/UpgradeModal").then((m) => m.UpgradeModal),
-  { ssr: false }
+  () => import("~/components/analytics/UpgradeModal").then((m) => m.UpgradeModal),
+  { ssr: false },
 );
 
 interface SubmissionValue {
@@ -64,8 +51,7 @@ export function AnalyticsPage() {
   // Debounce so filtering and any future expensive operations on the
   // submissions list don't run on every keystroke.
   const debouncedSearchQuery = useDebounce(searchQuery, 200);
-  const [viewingSubmission, setViewingSubmission] =
-    useState<Submission | null>(null);
+  const [viewingSubmission, setViewingSubmission] = useState<Submission | null>(null);
   const [showUpgrade, setShowUpgrade] = useState(false);
 
   const selectedFormId = searchParams.get("form");
@@ -75,15 +61,15 @@ export function AnalyticsPage() {
   };
 
   const { forms, isLoading: isLoadingForms } = useListFormsByUserId();
-  const { form, isLoading: isLoadingForm } = useGetFormById(
-    selectedFormId || ""
-  );
-  const { analytics, isLoading: isLoadingAnalytics } = useGetFormAnalytics(
-    selectedFormId || ""
-  );
-  const { submissions, isLoading: isLoadingSubmissions, hasNextPage, isFetchingNextPage, fetchNextPage } = useGetSubmissions(
-    selectedFormId || ""
-  );
+  const { form, isLoading: isLoadingForm } = useGetFormById(selectedFormId || "");
+  const { analytics, isLoading: isLoadingAnalytics } = useGetFormAnalytics(selectedFormId || "");
+  const {
+    submissions,
+    isLoading: isLoadingSubmissions,
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
+  } = useGetSubmissions(selectedFormId || "");
   const { hasDetailedAnalytics: isFreeTier } = useGetMe();
 
   // Auto-select the first form when none is in the URL
@@ -102,8 +88,7 @@ export function AnalyticsPage() {
 
       if (form?.fields) {
         const emailField = form.fields.find(
-          (f) =>
-            f.type === "EMAIL" || f.label.toLowerCase().includes("email")
+          (f) => f.type === "EMAIL" || f.label.toLowerCase().includes("email"),
         );
         if (emailField) {
           const val = sub.values.find((v) => v.formFieldId === emailField.id);
@@ -114,7 +99,7 @@ export function AnalyticsPage() {
           (f) =>
             f.type === "TEXT" &&
             (f.label.toLowerCase().includes("name") ||
-              f.label.toLowerCase().includes("respondent"))
+              f.label.toLowerCase().includes("respondent")),
         );
         if (nameField) {
           const val = sub.values.find((v) => v.formFieldId === nameField.id);
@@ -125,7 +110,7 @@ export function AnalyticsPage() {
       }
       return { name, email };
     },
-    [form]
+    [form],
   );
 
   const handleExportCSV = () => {
@@ -163,7 +148,7 @@ export function AnalyticsPage() {
     link.setAttribute("href", url);
     link.setAttribute(
       "download",
-      `${form.title.toLowerCase().replace(/\s+/g, "_")}_submissions.csv`
+      `${form.title.toLowerCase().replace(/\s+/g, "_")}_submissions.csv`,
     );
     document.body.appendChild(link);
     link.click();
@@ -175,9 +160,7 @@ export function AnalyticsPage() {
   const totalResponses = analytics?.totalResponses ?? 0;
   const totalViews = analytics?.totalViews ?? 0;
   const completionRate =
-    (analytics?.completionRate != null
-      ? analytics.completionRate.toFixed(1)
-      : "0.0") + "%";
+    (analytics?.completionRate != null ? analytics.completionRate.toFixed(1) : "0.0") + "%";
   const avgPerDay = analytics?.avgSubmissionsPerDay ?? 0;
   const avgPerWeek = analytics?.avgSubmissionsPerWeek ?? 0;
   const peakDay = analytics?.peakDay ?? null;
@@ -209,8 +192,7 @@ export function AnalyticsPage() {
     });
   }, [submissions, debouncedSearchQuery, getRespondentDetails]);
 
-  const isLoading =
-    isLoadingForm || isLoadingAnalytics || isLoadingSubmissions;
+  const isLoading = isLoadingForm || isLoadingAnalytics || isLoadingSubmissions;
 
   return (
     <div className="flex flex-col lg:flex-row gap-6 min-h-[calc(100vh-140px)] w-full">
@@ -234,15 +216,10 @@ export function AnalyticsPage() {
         ) : !form ? (
           <div className="h-64 flex items-center justify-center bg-[color:var(--cf-cream-2)] rounded-xl ring-1 ring-[color:var(--cf-line)] text-center p-8">
             <div className="max-w-xs space-y-2">
-              <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-                No form selected
-              </p>
-              <h4 className="cf-display text-[20px] leading-tight">
-                Pick a form
-              </h4>
+              <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">No form selected</p>
+              <h4 className="cf-display text-[20px] leading-tight">Pick a form</h4>
               <p className="text-[13px] text-[color:var(--cf-ink-soft)] leading-relaxed">
-                Choose a form from the sidebar to load its analytics and
-                response history.
+                Choose a form from the sidebar to load its analytics and response history.
               </p>
             </div>
           </div>
@@ -251,9 +228,7 @@ export function AnalyticsPage() {
             {/* Header */}
             <div className="bg-[color:var(--cf-cream-2)] rounded-xl ring-1 ring-[color:var(--cf-line)] p-5 sm:p-6 flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4">
               <div className="min-w-0">
-                <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-                  Analytics
-                </p>
+                <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Analytics</p>
                 <h1 className="mt-2 cf-display text-[28px] sm:text-[32px] leading-tight truncate">
                   {form.title}
                 </h1>
@@ -324,9 +299,7 @@ export function AnalyticsPage() {
               </div>
             </div>
 
-            {showUpgrade && (
-              <UpgradeModal onClose={() => setShowUpgrade(false)} />
-            )}
+            {showUpgrade && <UpgradeModal onClose={() => setShowUpgrade(false)} />}
 
             <MetricsGrid
               totalResponses={totalResponses}
@@ -342,14 +315,8 @@ export function AnalyticsPage() {
             />
 
             <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
-              <ResponseTimeline
-                totalResponses={totalResponses}
-                trends={dailyTrends}
-              />
-              <DeviceBreakdown
-                totalViews={totalViews}
-                deviceData={deviceData}
-              />
+              <ResponseTimeline totalResponses={totalResponses} trends={dailyTrends} />
+              <DeviceBreakdown totalViews={totalViews} deviceData={deviceData} />
             </div>
 
             <SubmissionsTable
diff --git a/apps/web/app/dashboard/layout.tsx b/apps/web/app/dashboard/layout.tsx
index d8116bb..ac1da5d 100644
--- a/apps/web/app/dashboard/layout.tsx
+++ b/apps/web/app/dashboard/layout.tsx
@@ -3,15 +3,7 @@
 import React, { useState } from "react";
 import { EB_Garamond, Caveat } from "next/font/google";
 import Image from "next/image";
-import {
-  ArrowUpRight,
-  Building2,
-  Flame,
-  Menu,
-  Sparkles,
-  X,
-  Zap,
-} from "lucide-react";
+import { ArrowUpRight, Building2, Flame, Menu, Sparkles, X, Zap } from "lucide-react";
 import { useRouter, usePathname } from "next/navigation";
 import { toast } from "sonner";
 
@@ -54,16 +46,11 @@ const PLAN_STYLE: Record<
   },
   Business: {
     icon: Building2,
-    chipClass:
-      "bg-[color:var(--cf-ink)] ring-[color:var(--cf-ink)] text-white",
+    chipClass: "bg-[color:var(--cf-ink)] ring-[color:var(--cf-ink)] text-white",
   },
 };
 
-export default function DashboardLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
   const router = useRouter();
   const pathname = usePathname();
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -92,7 +79,7 @@ export default function DashboardLayout({
       val
         .toLowerCase()
         .replace(/[^a-z0-9]+/g, "-")
-        .replace(/(^-|-$)/g, "")
+        .replace(/(^-|-$)/g, ""),
     );
   };
 
@@ -167,13 +154,7 @@ export default function DashboardLayout({
         {/* Mobile header */}
         <header className="md:hidden flex items-center justify-between p-4 border-b border-[color:var(--cf-line)] bg-[color:var(--cf-cream)] z-40">
           <div className="flex items-center gap-2.5">
-            <Image
-              src="/logo.svg"
-              alt=""
-              width={28}
-              height={28}
-              className="object-contain"
-            />
+            <Image src="/logo.svg" alt="" width={28} height={28} className="object-contain" />
             <span className="cf-display text-[20px] leading-none">CanvasFlow</span>
           </div>
           <button
@@ -185,10 +166,7 @@ export default function DashboardLayout({
           </button>
         </header>
 
-        <Sidebar
-          isOpen={sidebarOpen}
-          onClose={() => setSidebarOpen(false)}
-        />
+        <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
 
         {/* Main */}
         <div className="flex-1 flex flex-col min-h-screen overflow-hidden">
@@ -215,9 +193,7 @@ export default function DashboardLayout({
                 >
                   <PlanIcon
                     className={`size-3 ${
-                      plan === "Business"
-                        ? "text-white"
-                        : "text-[color:var(--cf-orange)]"
+                      plan === "Business" ? "text-white" : "text-[color:var(--cf-orange)]"
                     }`}
                   />
                   <span>{plan} plan</span>
@@ -246,8 +222,8 @@ export default function DashboardLayout({
                 Start a new form
               </h3>
               <p className="mt-2 text-[13.5px] text-[color:var(--cf-ink-soft)] leading-relaxed">
-                Give your form a title and a unique slug. You can rename it
-                later — your data keys stay stable.
+                Give your form a title and a unique slug. You can rename it later — your data keys
+                stay stable.
               </p>
 
               <form onSubmit={handleFormSubmit} className="mt-6 space-y-4">
@@ -343,9 +319,7 @@ function CreatingOverlay() {
     <div className="fixed inset-0 z-[200] flex flex-col items-center justify-center bg-[color:var(--cf-cream)]">
       <div className="flex flex-col items-center gap-4">
         <div className="w-8 h-8 border-2 border-[color:var(--cf-line-strong)] border-t-[color:var(--cf-orange)] rounded-full animate-spin" />
-        <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-          Drafting your form...
-        </p>
+        <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Drafting your form...</p>
       </div>
     </div>
   );
diff --git a/apps/web/app/dashboard/page.tsx b/apps/web/app/dashboard/page.tsx
index 2d9ed0f..05b4e8f 100644
--- a/apps/web/app/dashboard/page.tsx
+++ b/apps/web/app/dashboard/page.tsx
@@ -48,13 +48,9 @@ export default function DashboardPage() {
 
   // ── chart summary stats (for the strip above the chart) ──────────────
   const trendSummary = useMemo(() => {
-    if (trendData.length === 0)
-      return { total: 0, avgPerDay: 0, peakLabel: "—", peakCount: 0 };
+    if (trendData.length === 0) return { total: 0, avgPerDay: 0, peakLabel: "—", peakCount: 0 };
     const total = trendData.reduce((sum, d) => sum + d.count, 0);
-    const peak = trendData.reduce(
-      (best, d) => (d.count > best.count ? d : best),
-      trendData[0]!
-    );
+    const peak = trendData.reduce((best, d) => (d.count > best.count ? d : best), trendData[0]!);
     return {
       total,
       avgPerDay: total / trendData.length,
@@ -64,17 +60,14 @@ export default function DashboardPage() {
   }, [trendData]);
 
   // tick density per range: 7d shows all, 30d every 4th, 3m every ~8th
-  const xTickInterval =
-    activeRange.id === "7d" ? 0 : activeRange.id === "30d" ? 3 : 7;
+  const xTickInterval = activeRange.id === "7d" ? 0 : activeRange.id === "30d" ? 3 : 7;
 
   const totalSketches = stats?.totalSketches ?? 0;
   const publishedSketches = stats?.publishedSketches ?? 0;
   const totalResponses = stats?.totalResponses ?? 0;
   const responsesThisMonth = stats?.responsesThisMonth ?? 0;
   const activePercent =
-    totalSketches > 0
-      ? Math.round((publishedSketches / totalSketches) * 100)
-      : 0;
+    totalSketches > 0 ? Math.round((publishedSketches / totalSketches) * 100) : 0;
 
   const STATS = [
     {
@@ -103,8 +96,7 @@ export default function DashboardPage() {
     },
   ];
 
-  const hasTrendData =
-    trendData.length > 0 && trendData.some((t) => t.count > 0);
+  const hasTrendData = trendData.length > 0 && trendData.some((t) => t.count > 0);
 
   return (
     <div className="space-y-10">
@@ -137,17 +129,11 @@ export default function DashboardPage() {
               className="bg-[color:var(--cf-cream-2)] rounded-xl ring-1 ring-[color:var(--cf-line)] hover:ring-[color:var(--cf-line-strong)] transition-shadow p-5"
             >
               <div className="flex items-start justify-between">
-                <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-                  {stat.title}
-                </p>
+                <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">{stat.title}</p>
                 <Icon className="size-4 text-[color:var(--cf-orange)]" />
               </div>
-              <p className="mt-5 cf-display text-[40px] leading-none">
-                {stat.val}
-              </p>
-              <p className="mt-2 text-[12px] text-[color:var(--cf-ink-soft)]">
-                {stat.sub}
-              </p>
+              <p className="mt-5 cf-display text-[40px] leading-none">{stat.val}</p>
+              <p className="mt-2 text-[12px] text-[color:var(--cf-ink-soft)]">{stat.sub}</p>
             </div>
           );
         })}
@@ -157,9 +143,7 @@ export default function DashboardPage() {
       <div className="bg-[color:var(--cf-cream-2)] rounded-xl ring-1 ring-[color:var(--cf-line)] overflow-hidden">
         <div className="p-5 sm:p-6 border-b border-[color:var(--cf-line)] flex flex-col sm:flex-row sm:justify-between sm:items-end gap-3">
           <div>
-            <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-              Analytics
-            </p>
+            <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Analytics</p>
             <h3 className="mt-2 cf-display text-[24px] sm:text-[28px] leading-tight">
               Response trends
             </h3>
@@ -191,22 +175,14 @@ export default function DashboardPage() {
 
         {/* mini summary row */}
         <div className="px-5 sm:px-6 py-4 border-b border-[color:var(--cf-line)] grid grid-cols-3 gap-4 sm:gap-8">
-          <SummaryMetric
-            label="Total in range"
-            value={trendSummary.total.toLocaleString()}
-          />
-          <SummaryMetric
-            label="Avg / day"
-            value={trendSummary.avgPerDay.toFixed(1)}
-          />
+          <SummaryMetric label="Total in range" value={trendSummary.total.toLocaleString()} />
+          <SummaryMetric label="Avg / day" value={trendSummary.avgPerDay.toFixed(1)} />
           <SummaryMetric
             label="Peak day"
             value={trendSummary.peakLabel}
             sub={
               trendSummary.peakCount > 0
-                ? `${trendSummary.peakCount} response${
-                    trendSummary.peakCount === 1 ? "" : "s"
-                  }`
+                ? `${trendSummary.peakCount} response${trendSummary.peakCount === 1 ? "" : "s"}`
                 : undefined
             }
           />
@@ -219,21 +195,16 @@ export default function DashboardPage() {
                 <div className="w-12 h-12 mx-auto mb-4 rounded-full bg-[color:var(--cf-cream)] flex items-center justify-center ring-1 ring-[color:var(--cf-line)]">
                   <Inbox className="size-5 text-[color:var(--cf-orange)]" />
                 </div>
-                <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-                  Awaiting data
-                </p>
+                <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Awaiting data</p>
                 <p className="mt-3 text-[13.5px] text-[color:var(--cf-ink-soft)] leading-relaxed">
-                  Publish your first form to start collecting responses and
-                  watch trends light up here.
+                  Publish your first form to start collecting responses and watch trends light up
+                  here.
                 </p>
               </div>
             </div>
           ) : (
             <ResponsiveContainer width="100%" height="100%">
-              <AreaChart
-                data={trendData}
-                margin={{ top: 24, right: 24, left: 4, bottom: 12 }}
-              >
+              <AreaChart data={trendData} margin={{ top: 24, right: 24, left: 4, bottom: 12 }}>
                 <defs>
                   <linearGradient id="cf-trend-gradient" x1="0" y1="0" x2="0" y2="1">
                     <stop offset="0%" stopColor="#f66f00" stopOpacity={0.32} />
@@ -280,10 +251,8 @@ export default function DashboardPage() {
                           {label}
                         </p>
                         <p className="mt-1 text-[13px] font-medium text-[color:var(--cf-ink)] tabular-nums">
-                          <span className="text-[color:var(--cf-orange)]">
-                            {count}
-                          </span>{" "}
-                          response{count === 1 ? "" : "s"}
+                          <span className="text-[color:var(--cf-orange)]">{count}</span> response
+                          {count === 1 ? "" : "s"}
                         </p>
                       </div>
                     );
@@ -313,9 +282,7 @@ export default function DashboardPage() {
         <div className="flex justify-between items-end pb-3 border-b border-[color:var(--cf-line)]">
           <div>
             <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Recent</p>
-            <h3 className="mt-2 cf-display text-[24px] sm:text-[28px] leading-tight">
-              Forms
-            </h3>
+            <h3 className="mt-2 cf-display text-[24px] sm:text-[28px] leading-tight">Forms</h3>
           </div>
           <Link
             href="/dashboard/sketches"
@@ -347,9 +314,7 @@ export default function DashboardPage() {
                     <FileText className="size-4 text-[color:var(--cf-orange)]" />
                   </div>
                   <div className="min-w-0">
-                    <h4 className="cf-display text-[18px] leading-tight truncate">
-                      {item.title}
-                    </h4>
+                    <h4 className="cf-display text-[18px] leading-tight truncate">{item.title}</h4>
                     <p className="text-[12px] text-[color:var(--cf-ink-soft)] mt-0.5">
                       {item.isPublished ? "Published" : "Draft"}
                       <span className="mx-1.5">·</span>
@@ -362,9 +327,7 @@ export default function DashboardPage() {
                   </div>
                 </div>
                 <div className="flex items-center gap-2 text-[12px] font-mono text-[color:var(--cf-ink-soft)] shrink-0">
-                  <span className="text-[color:var(--cf-ink)]">
-                    {item.submissionsCount}
-                  </span>
+                  <span className="text-[color:var(--cf-ink)]">{item.submissionsCount}</span>
                   <span>resp.</span>
                   <ArrowUpRight className="size-3.5 text-[color:var(--cf-ink-soft)] group-hover:text-[color:var(--cf-orange)] transition-colors" />
                 </div>
@@ -390,15 +353,7 @@ export default function DashboardPage() {
 
 /* ─── chart summary metric ──────────────────────────────────────────── */
 
-function SummaryMetric({
-  label,
-  value,
-  sub,
-}: {
-  label: string;
-  value: string;
-  sub?: string;
-}) {
+function SummaryMetric({ label, value, sub }: { label: string; value: string; sub?: string }) {
   return (
     <div className="min-w-0">
       <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">{label}</p>
@@ -406,9 +361,7 @@ function SummaryMetric({
         {value}
       </p>
       {sub && (
-        <p className="mt-1 text-[11px] font-mono text-[color:var(--cf-ink-soft)] truncate">
-          {sub}
-        </p>
+        <p className="mt-1 text-[11px] font-mono text-[color:var(--cf-ink-soft)] truncate">{sub}</p>
       )}
     </div>
   );
diff --git a/apps/web/app/dashboard/pricing/page.tsx b/apps/web/app/dashboard/pricing/page.tsx
index 3cf84ce..f442f8c 100644
--- a/apps/web/app/dashboard/pricing/page.tsx
+++ b/apps/web/app/dashboard/pricing/page.tsx
@@ -1,15 +1,7 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import {
-  ArrowUpRight,
-  Building2,
-  Check,
-  Flame,
-  Sparkles,
-  User,
-  Zap,
-} from "lucide-react";
+import { ArrowUpRight, Building2, Check, Flame, Sparkles, User, Zap } from "lucide-react";
 import { toast } from "sonner";
 
 interface Plan {
@@ -134,17 +126,14 @@ export default function PricingPage() {
       <div className="text-center space-y-5 max-w-2xl mx-auto">
         <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[color:var(--cf-cream-2)] ring-1 ring-[color:var(--cf-line-strong)]">
           <Sparkles className="size-3 text-[color:var(--cf-orange)]" />
-          <span className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-            Plans
-          </span>
+          <span className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Plans</span>
         </div>
         <h1 className="cf-display text-[40px] sm:text-[52px] leading-[0.95]">
           Simple, transparent pricing
         </h1>
         <p className="text-[14.5px] text-[color:var(--cf-ink-soft)] leading-relaxed">
-          Start free. Upgrade when you outgrow it. Every plan includes durable
-          data keys, real-time analytics, and unlimited respondents — only your
-          monthly submissions and form count scale.
+          Start free. Upgrade when you outgrow it. Every plan includes durable data keys, real-time
+          analytics, and unlimited respondents — only your monthly submissions and form count scale.
         </p>
       </div>
 
@@ -237,17 +226,13 @@ export default function PricingPage() {
                     isCurrent
                       ? "bg-[color:var(--cf-ink)] text-white"
                       : isFree
-                      ? plan.popular
-                        ? "bg-[color:var(--cf-orange)] hover:bg-[color:var(--cf-orange-hover)] text-white"
-                        : "ring-1 ring-[color:var(--cf-line-strong)] bg-[color:var(--cf-cream)] hover:bg-[color:var(--cf-cream-2)] text-[color:var(--cf-ink)]"
-                      : "ring-1 ring-[color:var(--cf-line)] bg-transparent text-[color:var(--cf-ink-soft)]"
+                        ? plan.popular
+                          ? "bg-[color:var(--cf-orange)] hover:bg-[color:var(--cf-orange-hover)] text-white"
+                          : "ring-1 ring-[color:var(--cf-line-strong)] bg-[color:var(--cf-cream)] hover:bg-[color:var(--cf-cream-2)] text-[color:var(--cf-ink)]"
+                        : "ring-1 ring-[color:var(--cf-line)] bg-transparent text-[color:var(--cf-ink-soft)]"
                   }`}
                 >
-                  {isCurrent
-                    ? "Current plan"
-                    : isFree
-                    ? "Select plan"
-                    : "Coming soon"}
+                  {isCurrent ? "Current plan" : isFree ? "Select plan" : "Coming soon"}
                   {isFree && !isCurrent && (
                     <ArrowUpRight className="size-3.5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
                   )}
@@ -261,9 +246,7 @@ export default function PricingPage() {
       {/* ───── compare strip ───── */}
       <div className="bg-[color:var(--cf-cream-2)] rounded-xl ring-1 ring-[color:var(--cf-line)] p-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div className="space-y-1.5">
-          <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-            Built into every plan
-          </p>
+          <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Built into every plan</p>
           <h3 className="cf-display text-[20px] leading-tight">
             The same canvas, the same data layer
           </h3>
@@ -288,9 +271,7 @@ export default function PricingPage() {
       <div className="space-y-5">
         <div className="text-center space-y-2 max-w-md mx-auto">
           <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">FAQ</p>
-          <h2 className="cf-display text-[28px] leading-tight">
-            Common questions
-          </h2>
+          <h2 className="cf-display text-[28px] leading-tight">Common questions</h2>
         </div>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           {FAQ.map((item, i) => (
diff --git a/apps/web/app/dashboard/sketches/[formId]/page.tsx b/apps/web/app/dashboard/sketches/[formId]/page.tsx
index 8b8fb33..bb5391a 100644
--- a/apps/web/app/dashboard/sketches/[formId]/page.tsx
+++ b/apps/web/app/dashboard/sketches/[formId]/page.tsx
@@ -1,12 +1,6 @@
 "use client";
 
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 import Link from "next/link";
 import {
@@ -35,10 +29,7 @@ import {
   useDeleteForm,
 } from "~/hooks/api/form";
 import { useDashboard } from "~/providers/dashboard-provider";
-import {
-  nodeTypes,
-  getFieldOptionsArray,
-} from "~/components/builder/FormFieldNode";
+import { nodeTypes, getFieldOptionsArray } from "~/components/builder/FormFieldNode";
 import { FieldSidebar } from "~/components/builder/FieldSidebar";
 import { FieldInspector } from "~/components/builder/FieldInspector";
 import { BuilderHeader } from "~/components/builder/BuilderHeader";
@@ -48,6 +39,7 @@ import { MobileFieldList } from "~/components/builder/mobile/MobileFieldList";
 import { MobileAddFieldSheet } from "~/components/builder/mobile/MobileAddFieldSheet";
 import { MobileFieldEditorSheet } from "~/components/builder/mobile/MobileFieldEditorSheet";
 import { ShareCollaboratorsDialog } from "~/components/builder/ShareCollaboratorsDialog";
+import { FormSettingsDialog } from "~/components/builder/FormSettingsDialog";
 
 function BuilderCanvas() {
   const params = useParams();
@@ -55,9 +47,7 @@ function BuilderCanvas() {
   const formId = params.formId as string;
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
 
-  const { form, isLoading: formLoading, refetch: refetchForm } = useGetForm(
-    formId
-  );
+  const { form, isLoading: formLoading, refetch: refetchForm } = useGetForm(formId);
   const { fields, isLoading: fieldsLoading, refetch: refetchFields } = useListFormFields(formId);
 
   const { setIsCreatingForm } = useDashboard();
@@ -74,7 +64,7 @@ function BuilderCanvas() {
   const { deleteFormAsync, isPending: deletePending } = useDeleteForm();
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [showShareDialog, setShowShareDialog] = useState(false);
-
+  const [showSettingsDialog, setShowSettingsDialog] = useState(false);
 
   /* ─── Local draft state ────────────────────────────────────────────── */
   type LocalField = NonNullable<typeof fields>[number] & { _isNew?: boolean };
@@ -143,10 +133,7 @@ function BuilderCanvas() {
         });
 
       const updateOps = localFields
-        .filter(
-          (f) =>
-            !f._isNew && dirtyIds.has(f.id) && !pendingDeletes.has(f.id)
-        )
+        .filter((f) => !f._isNew && dirtyIds.has(f.id) && !pendingDeletes.has(f.id))
         .map((f) =>
           updateFormFieldAsync({
             id: f.id,
@@ -160,13 +147,10 @@ function BuilderCanvas() {
             // this; if another writer (e.g. the same form open in a
             // second tab) raced us, the server throws and we surface the
             // conflict below instead of silently overwriting their work.
-            expectedVersion:
-              typeof (f as any).version === "number"
-                ? (f as any).version
-                : 0,
+            expectedVersion: typeof (f as any).version === "number" ? (f as any).version : 0,
           }).then((data) => {
             updatedVersionById.set(f.id, data.version);
-          })
+          }),
         );
 
       const deleteOps = localFields
@@ -187,13 +171,11 @@ function BuilderCanvas() {
             if (realId) next.id = realId;
             if (newVersion !== undefined) next.version = newVersion;
             return next;
-          })
+          }),
       );
       // Remap a selected temp id to its real id if it was just created
       setSelectedNodeId((prev) =>
-        prev && tempIdToRealId.has(prev)
-          ? (tempIdToRealId.get(prev) as string)
-          : prev
+        prev && tempIdToRealId.has(prev) ? (tempIdToRealId.get(prev) as string) : prev,
       );
       setDirtyIds(new Set());
       setPendingDeletes(new Set());
@@ -213,9 +195,7 @@ function BuilderCanvas() {
         message.includes("raced with another change");
 
       if (isLockConflict) {
-        toast.error(
-          "This form was edited from another session — reloading your view"
-        );
+        toast.error("This form was edited from another session — reloading your view");
         // Pull authoritative state from the server. Local dirty edits are
         // lost intentionally so we don't silently overwrite the other
         // session. (Better collaborative resolution would need a real
@@ -245,15 +225,10 @@ function BuilderCanvas() {
     refetchFields,
   ]);
 
-  const updateLocal = useCallback(
-    (id: string, patch: Partial<LocalField>) => {
-      setLocalFields((prev) =>
-        prev.map((f) => (f.id === id ? { ...f, ...patch } : f))
-      );
-      setDirtyIds((prev) => new Set(prev).add(id));
-    },
-    []
-  );
+  const updateLocal = useCallback((id: string, patch: Partial<LocalField>) => {
+    setLocalFields((prev) => prev.map((f) => (f.id === id ? { ...f, ...patch } : f)));
+    setDirtyIds((prev) => new Set(prev).add(id));
+  }, []);
 
   /* ─── React Flow state ─────────────────────────────────────────────── */
   const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
@@ -282,10 +257,7 @@ function BuilderCanvas() {
       // Sort by fractional index so the edge order (and any index-based
       // fallback positions for unsaved fields) match the current logical
       // sequence after a drag-reorder.
-      .sort(
-        (a, b) =>
-          parseFloat(String(a.index)) - parseFloat(String(b.index))
-      );
+      .sort((a, b) => parseFloat(String(a.index)) - parseFloat(String(b.index)));
     setNodes((prevNodes) => {
       const prevById = new Map(prevNodes.map((n) => [n.id, n]));
       return visible.map((field, idx) => {
@@ -298,11 +270,8 @@ function BuilderCanvas() {
         }
         // Brand new node — use the field's saved position or fall back to
         // a stacked layout below existing nodes.
-        const p =
-          (typeof field.options === "object" && field.options
-            ? (field.options as any)
-            : {}
-          ).position || { x: 300, y: idx * 200 + 80 };
+        const p = (typeof field.options === "object" && field.options ? (field.options as any) : {})
+          .position || { x: 300, y: idx * 200 + 80 };
         return {
           id: field.id,
           type: "formField",
@@ -335,7 +304,7 @@ function BuilderCanvas() {
 
   const selectedField = useMemo(
     () => localFields.find((f) => f.id === selectedNodeId) ?? null,
-    [localFields, selectedNodeId]
+    [localFields, selectedNodeId],
   );
 
   useEffect(() => {
@@ -370,9 +339,9 @@ function BuilderCanvas() {
         y: event.clientY,
       });
       const tempId = `new-${Date.now()}`;
-      const nextIndex = (
-        localFields.filter((f) => !pendingDeletes.has(f.id)).length + 1
-      ).toFixed(2);
+      const nextIndex = (localFields.filter((f) => !pendingDeletes.has(f.id)).length + 1).toFixed(
+        2,
+      );
       const newField = {
         id: tempId,
         formId,
@@ -396,7 +365,7 @@ function BuilderCanvas() {
       setDirtyIds((prev) => new Set(prev).add(tempId));
       setSelectedNodeId(tempId);
     },
-    [screenToFlowPosition, localFields, pendingDeletes, formId]
+    [screenToFlowPosition, localFields, pendingDeletes, formId],
   );
 
   const onNodeClick = useCallback((_: React.MouseEvent, node: any) => {
@@ -415,15 +384,11 @@ function BuilderCanvas() {
           : {};
       const sortedNodes = [...nodes];
       const idx = sortedNodes.findIndex((n) => n.id === node.id);
-      if (idx !== -1)
-        sortedNodes[idx] = { ...sortedNodes[idx]!, position: node.position };
+      if (idx !== -1) sortedNodes[idx] = { ...sortedNodes[idx]!, position: node.position };
       sortedNodes.sort((a, b) => a.position.y - b.position.y);
-      const originalOrder = localFields
-        .filter((f) => !pendingDeletes.has(f.id))
-        .map((f) => f.id);
+      const originalOrder = localFields.filter((f) => !pendingDeletes.has(f.id)).map((f) => f.id);
       const newOrder = sortedNodes.map((n) => n.id);
-      const orderChanged =
-        JSON.stringify(originalOrder) !== JSON.stringify(newOrder);
+      const orderChanged = JSON.stringify(originalOrder) !== JSON.stringify(newOrder);
 
       let newIndex: string = String(currentField.index);
       if (orderChanged) {
@@ -438,10 +403,7 @@ function BuilderCanvas() {
           const above = (sortedNodes[newIdx - 1]?.data as any)?.field;
           const below = (sortedNodes[newIdx + 1]?.data as any)?.field;
           if (above && below)
-            newIndex = (
-              (parseFloat(above.index) + parseFloat(below.index)) /
-              2
-            ).toFixed(2);
+            newIndex = ((parseFloat(above.index) + parseFloat(below.index)) / 2).toFixed(2);
         }
       }
       updateLocal(node.id, {
@@ -449,7 +411,7 @@ function BuilderCanvas() {
         options: { ...(currentOpts as any), position: node.position },
       });
     },
-    [localFields, pendingDeletes, nodes, updateLocal]
+    [localFields, pendingDeletes, nodes, updateLocal],
   );
 
   const handleRequiredChange = useCallback(
@@ -458,7 +420,7 @@ function BuilderCanvas() {
       setIsRequired(checked);
       updateLocal(selectedField.id, { isRequired: checked });
     },
-    [selectedField, updateLocal]
+    [selectedField, updateLocal],
   );
 
   const handleDeleteField = useCallback(() => {
@@ -482,11 +444,8 @@ function BuilderCanvas() {
     () =>
       localFields
         .filter((f) => !pendingDeletes.has(f.id))
-        .sort(
-          (a, b) =>
-            parseFloat(String(a.index)) - parseFloat(String(b.index))
-        ),
-    [localFields, pendingDeletes]
+        .sort((a, b) => parseFloat(String(a.index)) - parseFloat(String(b.index))),
+    [localFields, pendingDeletes],
   );
 
   // Tap a field card → select + open editor sheet.
@@ -515,7 +474,7 @@ function BuilderCanvas() {
       updateLocal(a.id, { index: String(b.index) });
       updateLocal(b.id, { index: String(a.index) });
     },
-    [visibleSortedFields, updateLocal]
+    [visibleSortedFields, updateLocal],
   );
 
   // Add a new field via the mobile sheet. Places the new node below the
@@ -527,9 +486,7 @@ function BuilderCanvas() {
       const lastIndexNum = last ? parseFloat(String(last.index)) : 0;
       const nextIndex = (lastIndexNum + 1).toFixed(2);
 
-      const lastPos = (last?.options as any)?.position as
-        | { x: number; y: number }
-        | undefined;
+      const lastPos = (last?.options as any)?.position as { x: number; y: number } | undefined;
       const position = lastPos
         ? { x: lastPos.x, y: lastPos.y + 200 }
         : { x: 300, y: visibleSortedFields.length * 200 + 80 };
@@ -559,7 +516,7 @@ function BuilderCanvas() {
       setMobileAddOpen(false);
       setMobileEditorOpen(true);
     },
-    [visibleSortedFields, formId]
+    [visibleSortedFields, formId],
   );
 
   if (formLoading || fieldsLoading) {
@@ -567,9 +524,7 @@ function BuilderCanvas() {
       <div className="h-screen w-full flex items-center justify-center bg-[color:var(--cf-cream)]">
         <div className="flex flex-col items-center gap-3">
           <div className="w-8 h-8 border-2 border-[color:var(--cf-line-strong)] border-t-[color:var(--cf-orange)] rounded-full animate-spin" />
-          <span className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-            Loading canvas...
-          </span>
+          <span className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Loading canvas...</span>
         </div>
       </div>
     );
@@ -579,12 +534,8 @@ function BuilderCanvas() {
     return (
       <div className="h-screen w-full flex items-center justify-center bg-[color:var(--cf-cream)]">
         <div className="text-center space-y-4 max-w-sm">
-          <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-            Not found
-          </p>
-          <h3 className="cf-display text-[24px] leading-tight">
-            We couldn&apos;t find this form
-          </h3>
+          <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Not found</p>
+          <h3 className="cf-display text-[24px] leading-tight">We couldn&apos;t find this form</h3>
           <Link
             href="/dashboard/sketches"
             className="inline-flex items-center gap-1.5 px-5 h-[40px] rounded-full bg-[color:var(--cf-orange)] hover:bg-[color:var(--cf-orange-hover)] text-white text-[13px] font-medium transition-colors"
@@ -600,14 +551,13 @@ function BuilderCanvas() {
     return (
       <div className="h-screen w-full flex items-center justify-center bg-[color:var(--cf-cream)] p-4 text-center">
         <div className="bg-[color:var(--cf-cream-2)] rounded-2xl ring-1 ring-[color:var(--cf-line-strong)] p-7 max-w-sm w-full shadow-[0_30px_80px_-30px_rgba(22,19,17,0.35)] space-y-4">
-          <p className="cf-eyebrow text-[color:var(--cf-orange)]">
-            No edit access
-          </p>
+          <p className="cf-eyebrow text-[color:var(--cf-orange)]">No edit access</p>
           <h3 className="cf-display text-[22px] leading-snug text-[color:var(--cf-ink)]">
             You don&apos;t have access to edit this form
           </h3>
           <p className="text-[13.5px] text-[color:var(--cf-ink-soft)] leading-relaxed">
-            You only have viewer access to &ldquo;{form.title}&rdquo;. You can view its submissions and analytics, but you cannot make changes to the fields.
+            You only have viewer access to &ldquo;{form.title}&rdquo;. You can view its submissions
+            and analytics, but you cannot make changes to the fields.
           </p>
           <div className="flex flex-col gap-2 pt-2">
             <Link
@@ -646,6 +596,7 @@ function BuilderCanvas() {
           void refetchForm();
         }}
         onShare={() => setShowShareDialog(true)}
+        onSettings={() => setShowSettingsDialog(true)}
       />
 
       <div className="flex-1 flex overflow-hidden">
@@ -724,11 +675,7 @@ function BuilderCanvas() {
                       : "text-[color:var(--cf-ink-soft)] hover:bg-[color:var(--cf-cream)] hover:text-[color:var(--cf-ink)]"
                   }`}
                 >
-                  {isLocked ? (
-                    <Lock className="size-3.5" />
-                  ) : (
-                    <Unlock className="size-3.5" />
-                  )}
+                  {isLocked ? <Lock className="size-3.5" /> : <Unlock className="size-3.5" />}
                 </button>
               </Panel>
             </ReactFlow>
@@ -802,9 +749,7 @@ function BuilderCanvas() {
             toast.success("Form deleted");
             router.push("/dashboard/sketches");
           } catch (err) {
-            toast.error(
-              err instanceof Error ? err.message : "Failed to delete"
-            );
+            toast.error(err instanceof Error ? err.message : "Failed to delete");
             setShowDeleteConfirm(false);
           }
         }}
@@ -818,8 +763,7 @@ function BuilderCanvas() {
           setDirtyIds(new Set());
           setPendingDeletes(new Set());
           setShowUnsavedDialog(false);
-          if (pendingNavRef.current)
-            window.location.href = pendingNavRef.current;
+          if (pendingNavRef.current) window.location.href = pendingNavRef.current;
         }}
         onSaveAndLeave={async () => {
           await handleSave();
@@ -827,8 +771,7 @@ function BuilderCanvas() {
           setDirtyIds(new Set());
           setPendingDeletes(new Set());
           setShowUnsavedDialog(false);
-          if (pendingNavRef.current)
-            window.location.href = pendingNavRef.current;
+          if (pendingNavRef.current) window.location.href = pendingNavRef.current;
         }}
       />
 
@@ -842,6 +785,14 @@ function BuilderCanvas() {
           onClose={() => setShowShareDialog(false)}
         />
       )}
+
+      {showSettingsDialog && form && (
+        <FormSettingsDialog
+          show={showSettingsDialog}
+          form={form}
+          onClose={() => setShowSettingsDialog(false)}
+        />
+      )}
     </div>
   );
 }
diff --git a/apps/web/app/dashboard/sketches/page.tsx b/apps/web/app/dashboard/sketches/page.tsx
index ff110cc..7b814e9 100644
--- a/apps/web/app/dashboard/sketches/page.tsx
+++ b/apps/web/app/dashboard/sketches/page.tsx
@@ -138,12 +138,9 @@ export default function SketchesPage() {
       <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-5">
         <div>
           <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">My forms</p>
-          <h1 className="mt-3 cf-display text-[36px] sm:text-[48px] leading-[0.95]">
-            Your studio
-          </h1>
+          <h1 className="mt-3 cf-display text-[36px] sm:text-[48px] leading-[0.95]">Your studio</h1>
           <p className="mt-3 text-[14.5px] text-[color:var(--cf-ink-soft)] leading-relaxed max-w-md">
-            {forms?.length ?? 0}{" "}
-            {forms?.length === 1 ? "form" : "forms"} in your workspace.
+            {forms?.length ?? 0} {forms?.length === 1 ? "form" : "forms"} in your workspace.
           </p>
         </div>
 
@@ -173,9 +170,7 @@ export default function SketchesPage() {
         {/* sort + filters */}
         <div className="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">
           <div className="flex items-center gap-2">
-            <span className="cf-eyebrow text-[color:var(--cf-ink-soft)] shrink-0">
-              Sort
-            </span>
+            <span className="cf-eyebrow text-[color:var(--cf-ink-soft)] shrink-0">Sort</span>
             <div className="relative">
               <select
                 value={sort}
@@ -219,9 +214,7 @@ export default function SketchesPage() {
       {isLoading ? (
         <div className="flex flex-col items-center justify-center py-24 gap-4">
           <div className="w-8 h-8 border-2 border-[color:var(--cf-line-strong)] border-t-[color:var(--cf-orange)] rounded-full animate-spin" />
-          <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-            Loading your forms...
-          </p>
+          <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Loading your forms...</p>
         </div>
       ) : paginatedForms.length === 0 ? (
         <EmptyState
@@ -255,8 +248,7 @@ export default function SketchesPage() {
       {!isLoading && processedForms.length > ITEMS_PER_PAGE && (
         <div className="flex flex-col sm:flex-row justify-between items-center border-t border-[color:var(--cf-line)] pt-6 gap-3">
           <p className="text-[12px] font-mono text-[color:var(--cf-ink-soft)]">
-            Page <span className="text-[color:var(--cf-ink)]">{page}</span> of{" "}
-            {totalPages}
+            Page <span className="text-[color:var(--cf-ink)]">{page}</span> of {totalPages}
           </p>
           <div className="flex gap-2">
             <button
@@ -283,9 +275,7 @@ export default function SketchesPage() {
       {confirmDeleteId && confirmDeleteForm && (
         <div className="fixed inset-0 z-[200] flex items-center justify-center bg-[color:var(--cf-ink)]/45 backdrop-blur-sm p-4">
           <div className="bg-[color:var(--cf-cream-2)] rounded-2xl ring-1 ring-[color:var(--cf-line-strong)] p-7 max-w-sm w-full shadow-[0_30px_80px_-30px_rgba(22,19,17,0.35)]">
-            <p className="cf-eyebrow text-[color:var(--cf-orange)]">
-              Permanent action
-            </p>
+            <p className="cf-eyebrow text-[color:var(--cf-orange)]">Permanent action</p>
             <h3 className="mt-3 cf-display text-[22px] leading-snug text-[color:var(--cf-ink)]">
               Delete this form?
             </h3>
@@ -293,8 +283,7 @@ export default function SketchesPage() {
               <span className="text-[color:var(--cf-ink)] font-medium">
                 &ldquo;{confirmDeleteForm.title}&rdquo;
               </span>{" "}
-              and all its fields and submissions will be permanently removed.
-              This cannot be undone.
+              and all its fields and submissions will be permanently removed. This cannot be undone.
             </p>
 
             <div className="flex justify-end gap-3 pt-6">
@@ -353,7 +342,7 @@ interface FormCardProps {
 function FormCard({ form, onDelete, onShare }: FormCardProps) {
   const isPublished = form.isPublished;
   const responses = form.submissionsCount ?? 0;
-  const canDelete = form.permissions?.settings?.canDelete ?? (form.role === "owner");
+  const canDelete = form.permissions?.settings?.canDelete ?? form.role === "owner";
 
   // Hover/focus prefetch — warm the builder's tRPC caches so clicking the
   // Open / Continue editing link feels instant. Cheap to call multiple
@@ -387,9 +376,7 @@ function FormCard({ form, onDelete, onShare }: FormCardProps) {
           <div className="mt-2">
             <span
               className={`block h-3 w-16 rounded-full ${
-                isPublished
-                  ? "bg-[color:var(--cf-ink)]"
-                  : "bg-[color:var(--cf-orange)]"
+                isPublished ? "bg-[color:var(--cf-ink)]" : "bg-[color:var(--cf-orange)]"
               }`}
             />
           </div>
diff --git a/apps/web/app/forms/[formId]/page.tsx b/apps/web/app/forms/[formId]/page.tsx
index 2d6642e..65ee34e 100644
--- a/apps/web/app/forms/[formId]/page.tsx
+++ b/apps/web/app/forms/[formId]/page.tsx
@@ -45,7 +45,7 @@ export default function PublicFormPage() {
   const idempotencyKeyRef = React.useRef<string>(
     typeof crypto !== "undefined" && "randomUUID" in crypto
       ? crypto.randomUUID()
-      : `${Date.now()}-${Math.random().toString(36).slice(2)}`
+      : `${Date.now()}-${Math.random().toString(36).slice(2)}`,
   );
 
   // Restore "already submitted" from localStorage on first paint so a
@@ -70,11 +70,7 @@ export default function PublicFormPage() {
       let deviceType = "desktop";
       if (/tablet|ipad|playbook|silk/i.test(ua)) {
         deviceType = "tablet";
-      } else if (
-        /mobile|iphone|ipod|android|blackberry|opera mini|iemobile|webos/i.test(
-          ua
-        )
-      ) {
+      } else if (/mobile|iphone|ipod|android|blackberry|opera mini|iemobile|webos/i.test(ua)) {
         deviceType = "mobile";
       }
 
@@ -144,9 +140,7 @@ export default function PublicFormPage() {
 
   const progressPercent =
     totalQuestions > 0
-      ? Math.round(
-          (Math.max(currentQuestionIndex, answeredCount) / totalQuestions) * 100
-        )
+      ? Math.round((Math.max(currentQuestionIndex, answeredCount) / totalQuestions) * 100)
       : 0;
 
   const handleNext = () => {
@@ -155,13 +149,9 @@ export default function PublicFormPage() {
     const value = answers[currentField.id];
     if (
       currentField.isRequired &&
-      (value === undefined ||
-        value === "" ||
-        (Array.isArray(value) && value.length === 0))
+      (value === undefined || value === "" || (Array.isArray(value) && value.length === 0))
     ) {
-      toast.error(
-        `Please answer the required field: "${currentField.label}"`
-      );
+      toast.error(`Please answer the required field: "${currentField.label}"`);
       return;
     }
 
@@ -199,12 +189,10 @@ export default function PublicFormPage() {
     if (currentQuestionIndex < totalQuestions - 1) {
       setCurrentQuestionIndex((prev) => prev + 1);
     } else {
-      const payloadValues = Object.entries(answers).map(
-        ([fieldId, value]) => ({
-          formFieldId: fieldId,
-          value,
-        })
-      );
+      const payloadValues = Object.entries(answers).map(([fieldId, value]) => ({
+        formFieldId: fieldId,
+        value,
+      }));
 
       submitForm(
         {
@@ -213,15 +201,9 @@ export default function PublicFormPage() {
           idempotencyKey: idempotencyKeyRef.current,
           visitorId: visitorIdRef.current,
           referrer: document.referrer || null,
-          utmSource: new URLSearchParams(window.location.search).get(
-            "utm_source"
-          ),
-          utmMedium: new URLSearchParams(window.location.search).get(
-            "utm_medium"
-          ),
-          utmCampaign: new URLSearchParams(window.location.search).get(
-            "utm_campaign"
-          ),
+          utmSource: new URLSearchParams(window.location.search).get("utm_source"),
+          utmMedium: new URLSearchParams(window.location.search).get("utm_medium"),
+          utmCampaign: new URLSearchParams(window.location.search).get("utm_campaign"),
           timeSpentMs: Date.now() - formOpenedAtRef.current,
         },
         {
@@ -252,7 +234,7 @@ export default function PublicFormPage() {
             }
             toast.error(err.message || "Failed to submit form");
           },
-        }
+        },
       );
     }
   };
@@ -266,6 +248,19 @@ export default function PublicFormPage() {
   if (isLoading) return <FormLoadingState />;
   if (error || !form) return <FormErrorState type="not-found" />;
   if (!form.isPublished) return <FormErrorState type="draft-mode" />;
+  if (!form.isOpen) return <FormErrorState type="closed" />;
+  if (form.expiresAt && new Date() > new Date(form.expiresAt)) {
+    return <FormErrorState type="expired" />;
+  }
+  if (
+    form.maxSubmissions !== null &&
+    form.maxSubmissions !== undefined &&
+    form.submissionsCount !== null &&
+    form.submissionsCount !== undefined &&
+    form.submissionsCount >= form.maxSubmissions
+  ) {
+    return <FormErrorState type="limit-reached" />;
+  }
   // Returning visitor (or a duplicate submit attempt that came back from
   // the server). Render the lockout instead of the form so they can't
   // even start typing a second response.
@@ -315,18 +310,11 @@ export default function PublicFormPage() {
 
       <main className="w-full max-w-2xl flex-1 flex flex-col items-center justify-center py-10 sm:py-14">
         {submitted ? (
-          <FormThankYou
-            siteRating={siteRating}
-            setSiteRating={setSiteRating}
-          />
+          <FormThankYou siteRating={siteRating} setSiteRating={setSiteRating} />
         ) : totalQuestions === 0 ? (
           <div className="w-full max-w-md text-center space-y-3 cf-animate-card">
-            <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-              Empty form
-            </p>
-            <h3 className="cf-display text-[28px] leading-tight">
-              Nothing to fill out yet
-            </h3>
+            <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Empty form</p>
+            <h3 className="cf-display text-[28px] leading-tight">Nothing to fill out yet</h3>
             <p className="text-[14px] text-[color:var(--cf-ink-soft)] leading-relaxed">
               The author hasn&apos;t added any questions to this form.
             </p>
diff --git a/apps/web/components/Sidebar.tsx b/apps/web/components/Sidebar.tsx
index 4e2c19f..40c62a0 100644
--- a/apps/web/components/Sidebar.tsx
+++ b/apps/web/components/Sidebar.tsx
@@ -4,15 +4,7 @@ import React, { useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import Image from "next/image";
-import {
-  Plus,
-  Compass,
-  PencilRuler,
-  BarChart3,
-  X,
-  Wallet,
-  LogOut,
-} from "lucide-react";
+import { Plus, Compass, PencilRuler, BarChart3, X, Wallet, LogOut } from "lucide-react";
 
 import { useDashboard } from "~/providers/dashboard-provider";
 import { useGetLoggedInUserInfo, useSignOut } from "~/hooks/api/auth";
@@ -63,13 +55,7 @@ export default function Sidebar({ isOpen, onClose }: SidebarProps) {
           {/* brand */}
           <div className="flex items-center justify-between">
             <Link href="/dashboard" className="flex items-center gap-2.5" onClick={onClose}>
-              <Image
-                src="/logo.svg"
-                alt=""
-                width={28}
-                height={28}
-                className="object-contain"
-              />
+              <Image src="/logo.svg" alt="" width={28} height={28} className="object-contain" />
               <span className="cf-display text-[20px] leading-none text-[color:var(--cf-ink)]">
                 CanvasFlow
               </span>
@@ -94,9 +80,7 @@ export default function Sidebar({ isOpen, onClose }: SidebarProps) {
 
           {/* nav */}
           <nav className="space-y-0.5">
-            <p className="cf-eyebrow text-[color:var(--cf-ink-soft)] px-3 mb-2">
-              Workspace
-            </p>
+            <p className="cf-eyebrow text-[color:var(--cf-ink-soft)] px-3 mb-2">Workspace</p>
             {LINKS.map((item) => {
               const Icon = item.icon;
               const isActive = pathname === item.href;
@@ -143,9 +127,7 @@ export default function Sidebar({ isOpen, onClose }: SidebarProps) {
                     <p className="text-[13px] font-medium truncate text-[color:var(--cf-ink)]">
                       {fullName}
                     </p>
-                    <p className="text-[11px] text-[color:var(--cf-ink-soft)] truncate">
-                      {email}
-                    </p>
+                    <p className="text-[11px] text-[color:var(--cf-ink-soft)] truncate">{email}</p>
                   </div>
                 </>
               )}
diff --git a/apps/web/components/analytics/AnalyticsSidebar.tsx b/apps/web/components/analytics/AnalyticsSidebar.tsx
index ffed912..601add8 100644
--- a/apps/web/components/analytics/AnalyticsSidebar.tsx
+++ b/apps/web/components/analytics/AnalyticsSidebar.tsx
@@ -40,9 +40,7 @@ export function AnalyticsSidebar({
     <aside className="w-full lg:w-64 shrink-0 bg-[color:var(--cf-cream-2)] rounded-xl ring-1 ring-[color:var(--cf-line)] p-4 lg:p-5 flex flex-col gap-3 lg:gap-4">
       <div className="space-y-1.5">
         <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Analytics</p>
-        <h3 className="cf-display text-[20px] lg:text-[22px] leading-tight">
-          Forms
-        </h3>
+        <h3 className="cf-display text-[20px] lg:text-[22px] leading-tight">Forms</h3>
       </div>
 
       <div className="border-t border-[color:var(--cf-line)] pt-3">
diff --git a/apps/web/components/analytics/DeviceBreakdown.tsx b/apps/web/components/analytics/DeviceBreakdown.tsx
index 0f84778..47c2c95 100644
--- a/apps/web/components/analytics/DeviceBreakdown.tsx
+++ b/apps/web/components/analytics/DeviceBreakdown.tsx
@@ -19,12 +19,8 @@ export function DeviceBreakdown({ totalViews, deviceData }: DeviceBreakdownProps
     <div className="bg-[color:var(--cf-cream-2)] rounded-xl ring-1 ring-[color:var(--cf-line)] p-5 min-h-[300px] flex flex-col">
       <div>
         <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Devices</p>
-        <h4 className="mt-2 cf-display text-[20px] leading-tight">
-          Device breakdown
-        </h4>
-        <p className="mt-1 text-[12px] text-[color:var(--cf-ink-soft)]">
-          From page views
-        </p>
+        <h4 className="mt-2 cf-display text-[20px] leading-tight">Device breakdown</h4>
+        <p className="mt-1 text-[12px] text-[color:var(--cf-ink-soft)]">From page views</p>
       </div>
 
       {totalViews === 0 ? (
@@ -52,9 +48,7 @@ export function DeviceBreakdown({ totalViews, deviceData }: DeviceBreakdownProps
               </PieChart>
             </ResponsiveContainer>
             <div className="absolute inset-0 flex flex-col justify-center items-center pointer-events-none">
-              <span className="cf-display text-[20px] leading-none">
-                {totalViews}
-              </span>
+              <span className="cf-display text-[20px] leading-none">{totalViews}</span>
               <span className="cf-eyebrow text-[color:var(--cf-ink-soft)] mt-1 text-[9px]">
                 total
               </span>
@@ -63,29 +57,18 @@ export function DeviceBreakdown({ totalViews, deviceData }: DeviceBreakdownProps
 
           <div className="w-full space-y-1.5">
             {deviceData.map((dev, idx) => {
-              const pct =
-                totalViews > 0
-                  ? ((dev.value / totalViews) * 100).toFixed(0)
-                  : "0";
+              const pct = totalViews > 0 ? ((dev.value / totalViews) * 100).toFixed(0) : "0";
               return (
                 <div
                   key={idx}
                   className="flex justify-between items-center text-[12px] font-mono text-[color:var(--cf-ink-soft)]"
                 >
                   <div className="flex items-center gap-2">
-                    <span
-                      className="size-2 rounded-full"
-                      style={{ backgroundColor: dev.color }}
-                    />
-                    <span className="text-[color:var(--cf-ink)]">
-                      {dev.name}
-                    </span>
+                    <span className="size-2 rounded-full" style={{ backgroundColor: dev.color }} />
+                    <span className="text-[color:var(--cf-ink)]">{dev.name}</span>
                   </div>
                   <span className="tabular-nums">
-                    <span className="text-[color:var(--cf-ink)]">
-                      {dev.value}
-                    </span>{" "}
-                    ({pct}%)
+                    <span className="text-[color:var(--cf-ink)]">{dev.value}</span> ({pct}%)
                   </span>
                 </div>
               );
diff --git a/apps/web/components/analytics/DowBreakdown.tsx b/apps/web/components/analytics/DowBreakdown.tsx
index aa8925c..2552e06 100644
--- a/apps/web/components/analytics/DowBreakdown.tsx
+++ b/apps/web/components/analytics/DowBreakdown.tsx
@@ -22,12 +22,8 @@ export function DowBreakdown({ dowBreakdown }: DowBreakdownProps) {
     <div className="bg-[color:var(--cf-cream-2)] rounded-xl ring-1 ring-[color:var(--cf-line)] p-5 min-h-[260px] flex flex-col">
       <div>
         <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Cadence</p>
-        <h4 className="mt-2 cf-display text-[20px] leading-tight">
-          Day of week
-        </h4>
-        <p className="mt-1 text-[12px] text-[color:var(--cf-ink-soft)]">
-          When do people respond?
-        </p>
+        <h4 className="mt-2 cf-display text-[20px] leading-tight">Day of week</h4>
+        <p className="mt-1 text-[12px] text-[color:var(--cf-ink-soft)]">When do people respond?</p>
       </div>
       <div className="flex-1 w-full min-h-[160px] mt-4">
         <ResponsiveContainer width="100%" height="100%">
diff --git a/apps/web/components/analytics/FieldCompletionRates.tsx b/apps/web/components/analytics/FieldCompletionRates.tsx
index 18eb8ed..1f6b130 100644
--- a/apps/web/components/analytics/FieldCompletionRates.tsx
+++ b/apps/web/components/analytics/FieldCompletionRates.tsx
@@ -18,18 +18,14 @@ function rateColor(rate: number): string {
   return "#c1281d";
 }
 
-export function FieldCompletionRates({
-  fieldCompletionRates,
-}: FieldCompletionRatesProps) {
+export function FieldCompletionRates({ fieldCompletionRates }: FieldCompletionRatesProps) {
   if (fieldCompletionRates.length === 0) return null;
 
   return (
     <div className="bg-[color:var(--cf-cream-2)] rounded-xl ring-1 ring-[color:var(--cf-line)] p-5">
       <div>
         <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Completion</p>
-        <h4 className="mt-2 cf-display text-[20px] leading-tight">
-          Field completion
-        </h4>
+        <h4 className="mt-2 cf-display text-[20px] leading-tight">Field completion</h4>
         <p className="mt-1 text-[12px] text-[color:var(--cf-ink-soft)]">
           Of all visitors who opened the form, % who answered each field
         </p>
diff --git a/apps/web/components/analytics/HourlyHeatmap.tsx b/apps/web/components/analytics/HourlyHeatmap.tsx
index 69f3e13..ef40413 100644
--- a/apps/web/components/analytics/HourlyHeatmap.tsx
+++ b/apps/web/components/analytics/HourlyHeatmap.tsx
@@ -29,10 +29,7 @@ function formatHourLabel(hour: number): string {
   return "";
 }
 
-export function HourlyHeatmap({
-  hourlyDistribution,
-  peakHour,
-}: HourlyHeatmapProps) {
+export function HourlyHeatmap({ hourlyDistribution, peakHour }: HourlyHeatmapProps) {
   const distributionMap = new Map(hourlyDistribution.map((d) => [d.hour, d.count]));
   const chartData = Array.from({ length: 24 }, (_, i) => ({
     hour: i,
@@ -44,9 +41,7 @@ export function HourlyHeatmap({
     <div className="bg-[color:var(--cf-cream-2)] rounded-xl ring-1 ring-[color:var(--cf-line)] p-5 min-h-[280px] flex flex-col">
       <div>
         <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Hours</p>
-        <h4 className="mt-2 cf-display text-[20px] leading-tight">
-          Submission hours
-        </h4>
+        <h4 className="mt-2 cf-display text-[20px] leading-tight">Submission hours</h4>
         <p className="mt-1 text-[12px] text-[color:var(--cf-ink-soft)]">
           When your audience responds
         </p>
@@ -59,7 +54,11 @@ export function HourlyHeatmap({
       ) : (
         <div className="flex-1 w-full min-h-[200px] mt-4">
           <ResponsiveContainer width="100%" height="100%">
-            <BarChart data={chartData} barCategoryGap="10%" margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
+            <BarChart
+              data={chartData}
+              barCategoryGap="10%"
+              margin={{ top: 4, right: 8, left: 0, bottom: 0 }}
+            >
               <XAxis
                 dataKey="hour"
                 stroke="#56504a"
@@ -84,10 +83,10 @@ export function HourlyHeatmap({
                     hour === 0
                       ? "12am"
                       : hour < 12
-                      ? `${hour}am`
-                      : hour === 12
-                      ? "12pm"
-                      : `${hour - 12}pm`;
+                        ? `${hour}am`
+                        : hour === 12
+                          ? "12pm"
+                          : `${hour - 12}pm`;
                   return [value, label];
                 }}
                 contentStyle={{
diff --git a/apps/web/components/analytics/MetricsGrid.tsx b/apps/web/components/analytics/MetricsGrid.tsx
index 33fa78d..8880a94 100644
--- a/apps/web/components/analytics/MetricsGrid.tsx
+++ b/apps/web/components/analytics/MetricsGrid.tsx
@@ -33,14 +33,10 @@ export function MetricsGrid({
             className="bg-[color:var(--cf-cream-2)] rounded-xl ring-1 ring-[color:var(--cf-line)] hover:ring-[color:var(--cf-line-strong)] transition-shadow p-5"
           >
             <div className="flex items-start justify-between">
-              <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-                {stat.title}
-              </p>
+              <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">{stat.title}</p>
               <Icon className="size-4 text-[color:var(--cf-orange)]" />
             </div>
-            <p className="mt-5 cf-display text-[36px] leading-none tabular-nums">
-              {stat.val}
-            </p>
+            <p className="mt-5 cf-display text-[36px] leading-none tabular-nums">{stat.val}</p>
           </div>
         );
       })}
diff --git a/apps/web/components/analytics/QuestionDistribution.tsx b/apps/web/components/analytics/QuestionDistribution.tsx
index 4b4f9b4..e8386f9 100644
--- a/apps/web/components/analytics/QuestionDistribution.tsx
+++ b/apps/web/components/analytics/QuestionDistribution.tsx
@@ -35,16 +35,7 @@ interface QuestionDistributionProps {
 }
 
 const CHOICE_TYPES = ["SELECT", "RADIO", "CHECKBOX"];
-const TEXT_TYPES = [
-  "TEXT",
-  "TEXTAREA",
-  "EMAIL",
-  "NUMBER",
-  "PHONE",
-  "URL",
-  "DATE",
-  "TIME",
-];
+const TEXT_TYPES = ["TEXT", "TEXTAREA", "EMAIL", "NUMBER", "PHONE", "URL", "DATE", "TIME"];
 
 function FieldTypePill({ type }: { type: string }) {
   return (
@@ -60,8 +51,7 @@ function ChoiceBar({ option }: { option: OptionCount }) {
       <div className="flex justify-between items-center text-[12px] gap-3">
         <span className="text-[color:var(--cf-ink)] truncate">{option.value}</span>
         <span className="font-mono text-[color:var(--cf-ink-soft)] tabular-nums shrink-0">
-          {option.count}{" "}
-          <span className="opacity-60">({option.percent}%)</span>
+          {option.count} <span className="opacity-60">({option.percent}%)</span>
         </span>
       </div>
       <div className="h-1.5 bg-[color:var(--cf-cream)] rounded-full overflow-hidden ring-1 ring-[color:var(--cf-line)]">
@@ -95,9 +85,7 @@ function RatingStars({ avg }: { avg: number }) {
           );
         })}
       </div>
-      <span className="cf-display text-[20px] leading-none tabular-nums">
-        {avg.toFixed(1)}
-      </span>
+      <span className="cf-display text-[20px] leading-none tabular-nums">{avg.toFixed(1)}</span>
       <span className="cf-eyebrow text-[color:var(--cf-ink-soft)]">avg</span>
     </div>
   );
@@ -107,10 +95,7 @@ function RatingDistBar({ dist }: { dist: RatingDistItem[] }) {
   return (
     <div className="space-y-1.5 mt-3">
       {dist.map((d) => (
-        <div
-          key={d.rating}
-          className="flex items-center gap-2 text-[11px] font-mono"
-        >
+        <div key={d.rating} className="flex items-center gap-2 text-[11px] font-mono">
           <span className="w-3 text-[color:var(--cf-ink-soft)] text-right tabular-nums">
             {d.rating}
           </span>
@@ -166,13 +151,7 @@ function ToggleBar({ counts }: { counts: ToggleCounts }) {
   );
 }
 
-function TextSamples({
-  samples,
-  totalAnswered,
-}: {
-  samples: string[];
-  totalAnswered: number;
-}) {
+function TextSamples({ samples, totalAnswered }: { samples: string[]; totalAnswered: number }) {
   const shown = samples.slice(0, 3);
   const remaining = totalAnswered - shown.length;
   return (
@@ -219,9 +198,7 @@ function QuestionCard({ q }: { q: QuestionItem }) {
 
       <div className="px-4 py-4 space-y-2">
         {q.totalAnswered === 0 ? (
-          <p className="text-[12px] text-[color:var(--cf-ink-soft)]">
-            0 responses for this field
-          </p>
+          <p className="text-[12px] text-[color:var(--cf-ink-soft)]">0 responses for this field</p>
         ) : (
           <>
             {isChoice && q.optionCounts && (
@@ -234,12 +211,8 @@ function QuestionCard({ q }: { q: QuestionItem }) {
 
             {isRating && (
               <div className="space-y-2">
-                {q.averageRating !== undefined && (
-                  <RatingStars avg={q.averageRating} />
-                )}
-                {q.ratingDistribution && (
-                  <RatingDistBar dist={q.ratingDistribution} />
-                )}
+                {q.averageRating !== undefined && <RatingStars avg={q.averageRating} />}
+                {q.ratingDistribution && <RatingDistBar dist={q.ratingDistribution} />}
               </div>
             )}
 
@@ -247,18 +220,12 @@ function QuestionCard({ q }: { q: QuestionItem }) {
 
             {isText && (
               <div className="space-y-2">
-                <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-                  Recent answers
-                </p>
+                <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Recent answers</p>
                 {q.textSamples && q.textSamples.length > 0 ? (
-                  <TextSamples
-                    samples={q.textSamples}
-                    totalAnswered={q.totalAnswered}
-                  />
+                  <TextSamples samples={q.textSamples} totalAnswered={q.totalAnswered} />
                 ) : (
                   <p className="text-[12px] text-[color:var(--cf-ink-soft)]">
-                    {q.totalAnswered} answer{q.totalAnswered !== 1 ? "s" : ""}{" "}
-                    recorded
+                    {q.totalAnswered} answer{q.totalAnswered !== 1 ? "s" : ""} recorded
                   </p>
                 )}
               </div>
@@ -266,8 +233,7 @@ function QuestionCard({ q }: { q: QuestionItem }) {
 
             {!isChoice && !isRating && !isToggle && !isText && (
               <p className="text-[12px] text-[color:var(--cf-ink-soft)]">
-                {q.totalAnswered} answer{q.totalAnswered !== 1 ? "s" : ""}{" "}
-                recorded
+                {q.totalAnswered} answer{q.totalAnswered !== 1 ? "s" : ""} recorded
               </p>
             )}
           </>
@@ -277,16 +243,12 @@ function QuestionCard({ q }: { q: QuestionItem }) {
   );
 }
 
-export function QuestionDistribution({
-  questionDistribution,
-}: QuestionDistributionProps) {
+export function QuestionDistribution({ questionDistribution }: QuestionDistributionProps) {
   return (
     <div className="bg-[color:var(--cf-cream-2)] rounded-xl ring-1 ring-[color:var(--cf-line)] p-5">
       <div>
         <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Questions</p>
-        <h4 className="mt-2 cf-display text-[20px] leading-tight">
-          Question breakdown
-        </h4>
+        <h4 className="mt-2 cf-display text-[20px] leading-tight">Question breakdown</h4>
         <p className="mt-1 text-[12px] text-[color:var(--cf-ink-soft)]">
           How respondents answered each question
         </p>
diff --git a/apps/web/components/analytics/ResponseTimeline.tsx b/apps/web/components/analytics/ResponseTimeline.tsx
index e89f888..f152be9 100644
--- a/apps/web/components/analytics/ResponseTimeline.tsx
+++ b/apps/web/components/analytics/ResponseTimeline.tsx
@@ -28,12 +28,8 @@ export function ResponseTimeline({ totalResponses, trends }: ResponseTimelinePro
       <div className="flex justify-between items-start mb-4">
         <div>
           <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Timeline</p>
-          <h4 className="mt-2 cf-display text-[20px] leading-tight">
-            Response timeline
-          </h4>
-          <p className="mt-1 text-[12px] text-[color:var(--cf-ink-soft)]">
-            Last 30 days
-          </p>
+          <h4 className="mt-2 cf-display text-[20px] leading-tight">Response timeline</h4>
+          <p className="mt-1 text-[12px] text-[color:var(--cf-ink-soft)]">Last 30 days</p>
         </div>
         <div className="flex items-center gap-1.5 text-[11px] font-mono text-[color:var(--cf-ink-soft)]">
           <span className="size-1.5 rounded-full bg-[color:var(--cf-orange)]" />
@@ -48,10 +44,7 @@ export function ResponseTimeline({ totalResponses, trends }: ResponseTimelinePro
       ) : (
         <div className="flex-1 w-full min-h-[200px]">
           <ResponsiveContainer width="100%" height="100%">
-            <AreaChart
-              data={chartData}
-              margin={{ top: 8, right: 16, left: 0, bottom: 8 }}
-            >
+            <AreaChart data={chartData} margin={{ top: 8, right: 16, left: 0, bottom: 8 }}>
               <defs>
                 <linearGradient id="rt-gradient" x1="0" y1="0" x2="0" y2="1">
                   <stop offset="0%" stopColor="#f66f00" stopOpacity={0.28} />
diff --git a/apps/web/components/analytics/StatsRow.tsx b/apps/web/components/analytics/StatsRow.tsx
index 0741725..90a640a 100644
--- a/apps/web/components/analytics/StatsRow.tsx
+++ b/apps/web/components/analytics/StatsRow.tsx
@@ -63,9 +63,7 @@ export function StatsRow({
               className="flex items-center gap-2 bg-[color:var(--cf-cream)] ring-1 ring-[color:var(--cf-line)] px-3 py-1.5 rounded-full"
             >
               <Icon className="size-3 text-[color:var(--cf-orange)] shrink-0" />
-              <span className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-                {chip.label}
-              </span>
+              <span className="cf-eyebrow text-[color:var(--cf-ink-soft)]">{chip.label}</span>
               <span className="text-[13px] font-medium text-[color:var(--cf-ink)] tabular-nums">
                 {chip.value}
               </span>
diff --git a/apps/web/components/analytics/SubmissionDetailModal.tsx b/apps/web/components/analytics/SubmissionDetailModal.tsx
index 425cd68..5ddecc0 100644
--- a/apps/web/components/analytics/SubmissionDetailModal.tsx
+++ b/apps/web/components/analytics/SubmissionDetailModal.tsx
@@ -54,9 +54,7 @@ export function SubmissionDetailModal({
             <X className="size-4" />
           </button>
 
-          <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-            Submission
-          </p>
+          <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Submission</p>
           <h4 className="mt-2 cf-display text-[22px] leading-tight pr-8 truncate">
             {respondent.name}
           </h4>
@@ -67,15 +65,9 @@ export function SubmissionDetailModal({
 
         <div className="px-6 py-5 overflow-y-auto flex-1 space-y-4">
           {form.fields.map((field) => {
-            const answer = submission.values.find(
-              (v) => v.formFieldId === field.id
-            );
+            const answer = submission.values.find((v) => v.formFieldId === field.id);
             let displayVal = "No answer provided";
-            if (
-              answer?.value !== undefined &&
-              answer?.value !== null &&
-              answer?.value !== ""
-            ) {
+            if (answer?.value !== undefined && answer?.value !== null && answer?.value !== "") {
               if (Array.isArray(answer.value)) {
                 displayVal = answer.value.join(", ");
               } else if (typeof answer.value === "boolean") {
@@ -87,9 +79,7 @@ export function SubmissionDetailModal({
 
             return (
               <div key={field.id} className="space-y-1.5">
-                <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-                  {field.label}
-                </p>
+                <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">{field.label}</p>
                 <div className="text-[13px] text-[color:var(--cf-ink)] bg-[color:var(--cf-cream)] ring-1 ring-[color:var(--cf-line)] rounded-md px-3 py-2.5">
                   {displayVal}
                 </div>
diff --git a/apps/web/components/analytics/SubmissionsTable.tsx b/apps/web/components/analytics/SubmissionsTable.tsx
index 1027392..48247c5 100644
--- a/apps/web/components/analytics/SubmissionsTable.tsx
+++ b/apps/web/components/analytics/SubmissionsTable.tsx
@@ -41,7 +41,7 @@ interface SubmissionsTableProps {
 // stays out of the initial bundle.
 const SubmissionDetailModal = dynamic(
   () => import("./SubmissionDetailModal").then((m) => m.SubmissionDetailModal),
-  { ssr: false }
+  { ssr: false },
 );
 
 const ROW_HEIGHT = 64; // px — fixed-height rows make virtualization simple
@@ -82,20 +82,10 @@ export function SubmissionsTable({
   React.useEffect(() => {
     const last = virtualItems[virtualItems.length - 1];
     if (!last) return;
-    if (
-      hasNextPage &&
-      !isFetchingNextPage &&
-      last.index >= filteredSubmissions.length - 3
-    ) {
+    if (hasNextPage && !isFetchingNextPage && last.index >= filteredSubmissions.length - 3) {
       fetchNextPage?.();
     }
-  }, [
-    virtualItems,
-    hasNextPage,
-    isFetchingNextPage,
-    filteredSubmissions.length,
-    fetchNextPage,
-  ]);
+  }, [virtualItems, hasNextPage, isFetchingNextPage, filteredSubmissions.length, fetchNextPage]);
 
   // Cap the scroll area: tall enough to feel like a real table, capped so
   // it doesn't push the page off the bottom on small viewports.
@@ -111,13 +101,10 @@ export function SubmissionsTable({
         <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4">
           <div>
             <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Latest</p>
-            <h4 className="mt-2 cf-display text-[20px] leading-tight">
-              Responses
-            </h4>
+            <h4 className="mt-2 cf-display text-[20px] leading-tight">Responses</h4>
             {filteredSubmissions.length > 0 && (
               <p className="mt-1 text-[11px] font-mono text-[color:var(--cf-ink-soft)]">
-                {filteredSubmissions.length}{" "}
-                {filteredSubmissions.length === 1 ? "row" : "rows"} ·
+                {filteredSubmissions.length} {filteredSubmissions.length === 1 ? "row" : "rows"} ·
                 virtualised
                 {hasNextPage ? " · more available" : ""}
               </p>
@@ -146,9 +133,7 @@ export function SubmissionsTable({
                   when the viewport is narrow; horizontal scroll on phones */}
               <div className="min-w-[640px]">
                 {/* Header — outside the virtualized scroll area, always visible */}
-                <div
-                  className={`${GRID_COLS} px-1 pb-3 border-b border-[color:var(--cf-line)]`}
-                >
+                <div className={`${GRID_COLS} px-1 pb-3 border-b border-[color:var(--cf-line)]`}>
                   <div className="font-mono text-[11px] uppercase tracking-wider text-[color:var(--cf-ink-soft)] font-medium">
                     Respondent
                   </div>
@@ -181,9 +166,7 @@ export function SubmissionsTable({
                     {virtualItems.map((vi) => {
                       const sub = filteredSubmissions[vi.index]!;
                       const details = getRespondentDetails(sub);
-                      const initials = details.name
-                        .substring(0, 2)
-                        .toUpperCase();
+                      const initials = details.name.substring(0, 2).toUpperCase();
 
                       return (
                         <div
diff --git a/apps/web/components/analytics/TrafficSources.tsx b/apps/web/components/analytics/TrafficSources.tsx
index b7bc4ce..0991bb3 100644
--- a/apps/web/components/analytics/TrafficSources.tsx
+++ b/apps/web/components/analytics/TrafficSources.tsx
@@ -8,15 +8,7 @@ interface TrafficSourcesProps {
   utmSources: Array<{ source: string; count: number }>;
 }
 
-function SourceBar({
-  label,
-  count,
-  max,
-}: {
-  label: string;
-  count: number;
-  max: number;
-}) {
+function SourceBar({ label, count, max }: { label: string; count: number; max: number }) {
   const pct = max > 0 ? Math.round((count / max) * 100) : 0;
   return (
     <div className="space-y-1.5">
@@ -36,10 +28,7 @@ function SourceBar({
   );
 }
 
-export function TrafficSources({
-  topReferrers,
-  utmSources,
-}: TrafficSourcesProps) {
+export function TrafficSources({ topReferrers, utmSources }: TrafficSourcesProps) {
   const refMax = Math.max(...topReferrers.map((r) => r.count), 1);
   const utmMax = Math.max(...utmSources.map((u) => u.count), 1);
   const hasReferrers = topReferrers.length > 0;
@@ -49,12 +38,9 @@ export function TrafficSources({
     return (
       <div className="bg-[color:var(--cf-cream-2)] rounded-xl ring-1 ring-[color:var(--cf-line)] p-5">
         <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Traffic</p>
-        <h4 className="mt-2 cf-display text-[20px] leading-tight">
-          Traffic sources
-        </h4>
+        <h4 className="mt-2 cf-display text-[20px] leading-tight">Traffic sources</h4>
         <p className="mt-2 text-[13px] text-[color:var(--cf-ink-soft)] leading-relaxed">
-          No referrer data yet. Attribution is collected when visitors open the
-          form via a link.
+          No referrer data yet. Attribution is collected when visitors open the form via a link.
         </p>
       </div>
     );
@@ -68,17 +54,10 @@ export function TrafficSources({
             <Globe className="size-4 text-[color:var(--cf-orange)]" />
             <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Referrers</p>
           </div>
-          <h4 className="cf-display text-[20px] leading-tight">
-            Top referrers
-          </h4>
+          <h4 className="cf-display text-[20px] leading-tight">Top referrers</h4>
           <div className="mt-5 space-y-3">
             {topReferrers.map((r, i) => (
-              <SourceBar
-                key={i}
-                label={r.referrer}
-                count={r.count}
-                max={refMax}
-              />
+              <SourceBar key={i} label={r.referrer} count={r.count} max={refMax} />
             ))}
           </div>
         </div>
@@ -93,12 +72,7 @@ export function TrafficSources({
           <h4 className="cf-display text-[20px] leading-tight">UTM sources</h4>
           <div className="mt-5 space-y-3">
             {utmSources.map((u, i) => (
-              <SourceBar
-                key={i}
-                label={u.source}
-                count={u.count}
-                max={utmMax}
-              />
+              <SourceBar key={i} label={u.source} count={u.count} max={utmMax} />
             ))}
           </div>
         </div>
diff --git a/apps/web/components/analytics/UpgradeModal.tsx b/apps/web/components/analytics/UpgradeModal.tsx
index 650e6d9..50c254d 100644
--- a/apps/web/components/analytics/UpgradeModal.tsx
+++ b/apps/web/components/analytics/UpgradeModal.tsx
@@ -2,15 +2,7 @@
 
 import React from "react";
 import Link from "next/link";
-import {
-  ArrowUpRight,
-  BarChart3,
-  Sparkles,
-  Target,
-  TrendingUp,
-  X,
-  Zap,
-} from "lucide-react";
+import { ArrowUpRight, BarChart3, Sparkles, Target, TrendingUp, X, Zap } from "lucide-react";
 
 interface UpgradeModalProps {
   onClose: () => void;
@@ -40,19 +32,15 @@ export function UpgradeModal({ onClose }: UpgradeModalProps) {
             <Sparkles className="size-4 fill-current" />
             <p className="cf-eyebrow">Pro+ feature</p>
           </div>
-          <h3 className="mt-3 cf-display text-[26px] leading-tight">
-            Detailed analytics
-          </h3>
+          <h3 className="mt-3 cf-display text-[26px] leading-tight">Detailed analytics</h3>
           <p className="mt-2 text-[13.5px] text-[color:var(--cf-ink-soft)] leading-relaxed">
-            Available on Pro+ and Business plans. Unlock deeper per-question
-            insights and engagement breakdowns.
+            Available on Pro+ and Business plans. Unlock deeper per-question insights and engagement
+            breakdowns.
           </p>
         </div>
 
         <div className="px-6 py-5 space-y-3">
-          <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-            What you&apos;ll get
-          </p>
+          <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">What you&apos;ll get</p>
           {PRO_FEATURES.map((f, i) => {
             const Icon = f.icon;
             return (
@@ -60,9 +48,7 @@ export function UpgradeModal({ onClose }: UpgradeModalProps) {
                 <div className="size-7 rounded-md bg-[color:var(--cf-cream)] ring-1 ring-[color:var(--cf-line)] flex items-center justify-center shrink-0">
                   <Icon className="size-3.5 text-[color:var(--cf-orange)]" />
                 </div>
-                <span className="text-[13.5px] text-[color:var(--cf-ink)]">
-                  {f.label}
-                </span>
+                <span className="text-[13.5px] text-[color:var(--cf-ink)]">{f.label}</span>
               </div>
             );
           })}
diff --git a/apps/web/components/builder/BuilderHeader.tsx b/apps/web/components/builder/BuilderHeader.tsx
index db09c10..8e06c6b 100644
--- a/apps/web/components/builder/BuilderHeader.tsx
+++ b/apps/web/components/builder/BuilderHeader.tsx
@@ -8,6 +8,7 @@ import {
   Eye,
   MoreVertical,
   Save,
+  Settings,
   Share2,
   Trash2,
 } from "lucide-react";
@@ -34,12 +35,13 @@ interface BuilderHeaderProps {
   setShowDeleteConfirm: (val: boolean) => void;
   publishForm: (
     args: { id: string },
-    callbacks: { onSuccess: () => void; onError: (err: any) => void }
+    callbacks: { onSuccess: () => void; onError: (err: any) => void },
   ) => void;
   onPublishSuccess?: () => void;
   pendingNavRef: React.MutableRefObject<string | null>;
   setShowUnsavedDialog: (val: boolean) => void;
   onShare: () => void;
+  onSettings: () => void;
 }
 
 export function BuilderHeader({
@@ -56,11 +58,13 @@ export function BuilderHeader({
   setShowUnsavedDialog,
   onPublishSuccess,
   onShare,
+  onSettings,
 }: BuilderHeaderProps) {
   const isPublished = form?.isPublished ?? false;
+  const isOwner = form?.role === "owner";
   const [menuOpen, setMenuOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
-  const canDelete = form?.permissions?.settings?.canDelete ?? (form?.role === "owner");
+  const canDelete = form?.permissions?.settings?.canDelete ?? form?.role === "owner";
 
   // Close kebab menu on outside click / ESC
   useEffect(() => {
@@ -79,7 +83,6 @@ export function BuilderHeader({
     };
   }, [menuOpen]);
 
-
   return (
     <header className="h-14 px-3 sm:px-4 border-b border-[color:var(--cf-line)] flex items-center justify-between bg-[color:var(--cf-cream-2)] z-20 shrink-0 gap-2">
       {/* left: back + title */}
@@ -119,9 +122,7 @@ export function BuilderHeader({
         >
           <span
             className={`size-1.5 rounded-full ${
-              isPublished
-                ? "bg-[color:var(--cf-orange)]"
-                : "bg-[color:var(--cf-ink-soft)]/40"
+              isPublished ? "bg-[color:var(--cf-orange)]" : "bg-[color:var(--cf-ink-soft)]/40"
             }`}
           />
           {isPublished ? "Live" : "Draft"}
@@ -149,11 +150,7 @@ export function BuilderHeader({
               : "ring-[color:var(--cf-line-strong)] bg-[color:var(--cf-cream)] hover:bg-[color:var(--cf-cream-2)] text-[color:var(--cf-ink)] disabled:opacity-35"
           }`}
         >
-          {justSaved && !isSaving ? (
-            <Check className="size-3.5" />
-          ) : (
-            <Save className="size-3.5" />
-          )}
+          {justSaved && !isSaving ? <Check className="size-3.5" /> : <Save className="size-3.5" />}
           <span className="hidden sm:inline">
             {isSaving ? "Saving..." : justSaved ? "Saved" : "Save"}
           </span>
@@ -179,6 +176,17 @@ export function BuilderHeader({
           <span className="hidden md:inline">Share</span>
         </button>
 
+        {isOwner && (
+          <button
+            onClick={onSettings}
+            title="Form settings"
+            className="hidden sm:inline-flex items-center gap-1.5 h-[32px] px-3 rounded-full ring-1 ring-[color:var(--cf-line-strong)] bg-[color:var(--cf-cream)] hover:bg-[color:var(--cf-cream-2)] text-[12px] font-medium text-[color:var(--cf-ink)] transition-colors cursor-pointer"
+          >
+            <Settings className="size-3.5" />
+            <span className="hidden md:inline">Settings</span>
+          </button>
+        )}
+
         {canDelete && (
           <>
             <div className="hidden sm:block w-px h-5 bg-[color:var(--cf-line-strong)] mx-0.5" />
@@ -229,6 +237,18 @@ export function BuilderHeader({
                 <Share2 className="size-3.5 text-[color:var(--cf-ink-soft)]" />
                 Share form
               </button>
+              {isOwner && (
+                <button
+                  onClick={() => {
+                    onSettings();
+                    setMenuOpen(false);
+                  }}
+                  className="w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md text-[13px] text-[color:var(--cf-ink)] hover:bg-[color:var(--cf-cream)] transition-colors text-left cursor-pointer"
+                >
+                  <Settings className="size-3.5 text-[color:var(--cf-ink-soft)]" />
+                  Settings
+                </button>
+              )}
               {canDelete && (
                 <>
                   <div className="h-px bg-[color:var(--cf-line)] my-1" />
@@ -259,9 +279,8 @@ export function BuilderHeader({
                   toast.success("Form published");
                   onPublishSuccess?.();
                 },
-                onError: (err) =>
-                  toast.error(err.message || "Failed to publish"),
-              }
+                onError: (err) => toast.error(err.message || "Failed to publish"),
+              },
             );
           }}
           disabled={publishPending || isPublished}
diff --git a/apps/web/components/builder/DeleteFormDialog.tsx b/apps/web/components/builder/DeleteFormDialog.tsx
index 18cf8e0..40a3f77 100644
--- a/apps/web/components/builder/DeleteFormDialog.tsx
+++ b/apps/web/components/builder/DeleteFormDialog.tsx
@@ -23,18 +23,13 @@ export function DeleteFormDialog({
   return (
     <div className="fixed inset-0 z-[300] flex items-center justify-center bg-[color:var(--cf-ink)]/45 backdrop-blur-sm p-4">
       <div className="bg-[color:var(--cf-cream-2)] rounded-2xl ring-1 ring-[color:var(--cf-line-strong)] p-7 max-w-sm w-full shadow-[0_30px_80px_-30px_rgba(22,19,17,0.35)]">
-        <p className="cf-eyebrow text-[color:var(--cf-orange)]">
-          Permanent action
-        </p>
+        <p className="cf-eyebrow text-[color:var(--cf-orange)]">Permanent action</p>
         <h3 className="mt-3 cf-display text-[22px] leading-snug text-[color:var(--cf-ink)]">
           Delete this form?
         </h3>
         <p className="mt-2 text-[13.5px] text-[color:var(--cf-ink-soft)] leading-relaxed">
-          <span className="text-[color:var(--cf-ink)] font-medium">
-            &ldquo;{formTitle}&rdquo;
-          </span>{" "}
-          and all its fields and submissions will be permanently removed. This
-          cannot be undone.
+          <span className="text-[color:var(--cf-ink)] font-medium">&ldquo;{formTitle}&rdquo;</span>{" "}
+          and all its fields and submissions will be permanently removed. This cannot be undone.
         </p>
 
         <div className="flex justify-end gap-3 pt-6">
diff --git a/apps/web/components/builder/FieldInspector.tsx b/apps/web/components/builder/FieldInspector.tsx
index 6d5eeec..358d261 100644
--- a/apps/web/components/builder/FieldInspector.tsx
+++ b/apps/web/components/builder/FieldInspector.tsx
@@ -25,14 +25,9 @@ export interface FieldInspectorProps {
 // SELECT/CHECKBOX `choices` live alongside other config (like `position`) on
 // the field's options. Merge the new choices into the existing object so we
 // don't clobber position or any future config when editing the choice list.
-function mergeChoices(
-  currentOptions: any,
-  nextChoices: string[]
-): Record<string, any> {
+function mergeChoices(currentOptions: any, nextChoices: string[]): Record<string, any> {
   const base =
-    currentOptions &&
-    typeof currentOptions === "object" &&
-    !Array.isArray(currentOptions)
+    currentOptions && typeof currentOptions === "object" && !Array.isArray(currentOptions)
       ? (currentOptions as Record<string, any>)
       : {};
   return { ...base, choices: nextChoices };
@@ -42,22 +37,14 @@ function mergeChoices(
 
 function Label({ children }: { children: React.ReactNode }) {
   return (
-    <label className="block cf-eyebrow text-[color:var(--cf-ink-soft)] mb-1.5">
-      {children}
-    </label>
+    <label className="block cf-eyebrow text-[color:var(--cf-ink-soft)] mb-1.5">{children}</label>
   );
 }
 
 const INPUT_CLS =
   "w-full bg-[color:var(--cf-cream)] ring-1 ring-[color:var(--cf-line)] focus:ring-2 focus:ring-[color:var(--cf-orange)] focus:outline-none rounded-md px-3 h-[36px] text-[13px] text-[color:var(--cf-ink)] placeholder:text-[color:var(--cf-ink-soft)]/55 transition-shadow";
 
-function Section({
-  children,
-  title,
-}: {
-  children: React.ReactNode;
-  title?: string;
-}) {
+function Section({ children, title }: { children: React.ReactNode; title?: string }) {
   return (
     <div className="space-y-3">
       {title && (
@@ -70,20 +57,12 @@ function Section({
   );
 }
 
-function Toggle({
-  on,
-  onChange,
-}: {
-  on: boolean;
-  onChange: (v: boolean) => void;
-}) {
+function Toggle({ on, onChange }: { on: boolean; onChange: (v: boolean) => void }) {
   return (
     <button
       onClick={() => onChange(!on)}
       className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full transition-colors focus:outline-none ${
-        on
-          ? "bg-[color:var(--cf-orange)]"
-          : "bg-[color:var(--cf-ink)]/15"
+        on ? "bg-[color:var(--cf-orange)]" : "bg-[color:var(--cf-ink)]/15"
       }`}
       aria-pressed={on}
     >
@@ -166,16 +145,13 @@ export function FieldInspectorBody({
         <div className="flex items-center justify-between">
           <div>
             <p className="text-[13px] text-[color:var(--cf-ink)]">Required</p>
-            <p className="text-[11px] text-[color:var(--cf-ink-soft)]">
-              Force an answer
-            </p>
+            <p className="text-[11px] text-[color:var(--cf-ink-soft)]">Force an answer</p>
           </div>
           <Toggle on={isRequired} onChange={handleRequiredChange} />
         </div>
       </Section>
 
-      {(selectedField.type === "SELECT" ||
-        selectedField.type === "CHECKBOX") && (
+      {(selectedField.type === "SELECT" || selectedField.type === "CHECKBOX") && (
         <Section title="Options">
           <div className="space-y-1.5">
             {optionsList.map((opt, idx) => (
@@ -213,10 +189,7 @@ export function FieldInspectorBody({
           </div>
           <button
             onClick={() => {
-              const next = [
-                ...optionsList,
-                `Option ${optionsList.length + 1}`,
-              ];
+              const next = [...optionsList, `Option ${optionsList.length + 1}`];
               setOptionsList(next);
               updateLocal(selectedField.id, {
                 options: mergeChoices(selectedField.options, next),
@@ -334,9 +307,7 @@ export function FieldInspectorBody({
       {selectedField.type === "TOGGLE" && (
         <Section title="Toggle">
           <div className="flex items-center justify-between">
-            <p className="text-[13px] text-[color:var(--cf-ink)]">
-              Default on
-            </p>
+            <p className="text-[13px] text-[color:var(--cf-ink)]">Default on</p>
             <Toggle
               on={!!(selectedField.options as any)?.defaultValue}
               onChange={(v) =>
@@ -354,9 +325,7 @@ export function FieldInspectorBody({
               <Label>Active label</Label>
               <input
                 type="text"
-                defaultValue={
-                  (selectedField.options as any)?.activeLabel || "Yes"
-                }
+                defaultValue={(selectedField.options as any)?.activeLabel || "Yes"}
                 onBlur={(e) =>
                   updateLocal(selectedField.id, {
                     options: {
@@ -372,9 +341,7 @@ export function FieldInspectorBody({
               <Label>Inactive label</Label>
               <input
                 type="text"
-                defaultValue={
-                  (selectedField.options as any)?.inactiveLabel || "No"
-                }
+                defaultValue={(selectedField.options as any)?.inactiveLabel || "No"}
                 onBlur={(e) =>
                   updateLocal(selectedField.id, {
                     options: {
@@ -405,9 +372,7 @@ export function FieldInspector(props: FieldInspectorProps) {
           <MousePointerClick className="size-5" />
         </div>
         <div className="text-center space-y-1.5">
-          <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-            No field selected
-          </p>
+          <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">No field selected</p>
           <p className="text-[12px] text-[color:var(--cf-ink-soft)] leading-relaxed max-w-[200px]">
             Click a field on the canvas to inspect and configure it.
           </p>
@@ -424,9 +389,7 @@ export function FieldInspector(props: FieldInspectorProps) {
       <div className="px-4 py-3 border-b border-[color:var(--cf-line)] flex items-center justify-between">
         <div className="flex items-center gap-2">
           <SlidersHorizontal className="size-3.5 text-[color:var(--cf-orange)]" />
-          <span className="cf-eyebrow text-[color:var(--cf-ink)]">
-            Inspector
-          </span>
+          <span className="cf-eyebrow text-[color:var(--cf-ink)]">Inspector</span>
         </div>
         <div className="inline-flex items-center gap-1.5 bg-[color:var(--cf-cream)] ring-1 ring-[color:var(--cf-line)] px-2 py-0.5 rounded-full">
           <FieldIcon className="size-3 text-[color:var(--cf-orange)]" />
diff --git a/apps/web/components/builder/FieldSidebar.tsx b/apps/web/components/builder/FieldSidebar.tsx
index b8d62a2..65e6aaa 100644
--- a/apps/web/components/builder/FieldSidebar.tsx
+++ b/apps/web/components/builder/FieldSidebar.tsx
@@ -23,7 +23,7 @@ export function FieldSidebar({ onDragStart }: FieldSidebarProps) {
     ? AVAILABLE_FIELDS.filter(
         (f) =>
           f.label.toLowerCase().includes(query.toLowerCase()) ||
-          f.description.toLowerCase().includes(query.toLowerCase())
+          f.description.toLowerCase().includes(query.toLowerCase()),
       )
     : null;
 
@@ -60,9 +60,7 @@ export function FieldSidebar({ onDragStart }: FieldSidebarProps) {
           )
         ) : (
           CATEGORIES.map((cat) => {
-            const catFields = AVAILABLE_FIELDS.filter((f) =>
-              cat.types.includes(f.type)
-            );
+            const catFields = AVAILABLE_FIELDS.filter((f) => cat.types.includes(f.type));
             if (catFields.length === 0) return null;
             return (
               <div key={cat.label}>
@@ -71,11 +69,7 @@ export function FieldSidebar({ onDragStart }: FieldSidebarProps) {
                 </p>
                 <div className="space-y-0.5">
                   {catFields.map((f) => (
-                    <FieldItem
-                      key={f.type}
-                      field={f}
-                      onDragStart={onDragStart}
-                    />
+                    <FieldItem key={f.type} field={f} onDragStart={onDragStart} />
                   ))}
                 </div>
               </div>
diff --git a/apps/web/components/builder/FormFieldNode.tsx b/apps/web/components/builder/FormFieldNode.tsx
index 55cd663..eba81f1 100644
--- a/apps/web/components/builder/FormFieldNode.tsx
+++ b/apps/web/components/builder/FormFieldNode.tsx
@@ -40,23 +40,13 @@ export const getFieldIcon = (type: string) => {
 
 export const getFieldOptionsArray = (field: any): string[] => {
   if (Array.isArray(field.options)) return field.options;
-  if (
-    field.options &&
-    typeof field.options === "object" &&
-    Array.isArray(field.options.choices)
-  ) {
+  if (field.options && typeof field.options === "object" && Array.isArray(field.options.choices)) {
     return field.options.choices;
   }
   return ["Option 1", "Option 2"];
 };
 
-export const FormFieldNode = ({
-  data,
-  selected,
-}: {
-  data: any;
-  selected: boolean;
-}) => {
+export const FormFieldNode = ({ data, selected }: { data: any; selected: boolean }) => {
   const { field } = data;
   const IconComponent = getFieldIcon(field.type);
 
@@ -85,8 +75,7 @@ export const FormFieldNode = ({
         {/* label + description */}
         <div className="space-y-1.5">
           <h4 className="cf-display text-[16px] leading-snug text-[color:var(--cf-ink)] line-clamp-2">
-            {field.label ||
-              `Untitled ${field.type.replace("_", " ").toLowerCase()}`}
+            {field.label || `Untitled ${field.type.replace("_", " ").toLowerCase()}`}
           </h4>
 
           {field.description && (
@@ -140,9 +129,7 @@ function FieldPreview({ field }: { field: any }) {
             className="flex items-center justify-between text-[11px] text-[color:var(--cf-ink-soft)]"
           >
             <span className="truncate pr-2">{opt}</span>
-            <span className="text-[9px] text-[color:var(--cf-ink-soft)]/50">
-              ▼
-            </span>
+            <span className="text-[9px] text-[color:var(--cf-ink-soft)]/50">▼</span>
           </div>
         ))}
         {options.length > 3 && (
@@ -181,10 +168,7 @@ function FieldPreview({ field }: { field: any }) {
     return (
       <div className="flex items-center gap-1">
         {Array.from({ length: max }).map((_, i) => (
-          <Star
-            key={i}
-            className="size-3.5 text-[color:var(--cf-ink)]/15 fill-current"
-          />
+          <Star key={i} className="size-3.5 text-[color:var(--cf-ink)]/15 fill-current" />
         ))}
       </div>
     );
@@ -194,9 +178,7 @@ function FieldPreview({ field }: { field: any }) {
     const o = field.options as any;
     const range =
       o?.minDate || o?.maxDate
-        ? `${o?.minDate ? `From ${o.minDate}` : ""}${
-            o?.maxDate ? ` to ${o.maxDate}` : ""
-          }`
+        ? `${o?.minDate ? `From ${o.minDate}` : ""}${o?.maxDate ? ` to ${o.maxDate}` : ""}`
         : field.placeholder || "Select a date";
     return (
       <div className="bg-[color:var(--cf-cream)] ring-1 ring-[color:var(--cf-line)] rounded-md px-3 py-2 text-[12px] text-[color:var(--cf-ink-soft)] flex justify-between items-center">
@@ -210,9 +192,7 @@ function FieldPreview({ field }: { field: any }) {
     const o = field.options as any;
     const range =
       o?.minTime || o?.maxTime
-        ? `${o?.minTime ? `From ${o.minTime}` : ""}${
-            o?.maxTime ? ` to ${o.maxTime}` : ""
-          }`
+        ? `${o?.minTime ? `From ${o.minTime}` : ""}${o?.maxTime ? ` to ${o.maxTime}` : ""}`
         : field.placeholder || "Select a time";
     return (
       <div className="bg-[color:var(--cf-cream)] ring-1 ring-[color:var(--cf-line)] rounded-md px-3 py-2 text-[12px] text-[color:var(--cf-ink-soft)] flex justify-between items-center">
@@ -229,18 +209,14 @@ function FieldPreview({ field }: { field: any }) {
       <div className="flex items-center justify-between gap-3">
         <span
           className={`text-[11px] ${
-            !on
-              ? "font-medium text-[color:var(--cf-ink)]"
-              : "text-[color:var(--cf-ink-soft)]/55"
+            !on ? "font-medium text-[color:var(--cf-ink)]" : "text-[color:var(--cf-ink-soft)]/55"
           }`}
         >
           {o?.inactiveLabel || "No"}
         </span>
         <div
           className={`relative inline-flex h-4 w-8 shrink-0 rounded-full transition-colors ${
-            on
-              ? "bg-[color:var(--cf-orange)]"
-              : "bg-[color:var(--cf-ink)]/15"
+            on ? "bg-[color:var(--cf-orange)]" : "bg-[color:var(--cf-ink)]/15"
           }`}
         >
           <span
@@ -251,9 +227,7 @@ function FieldPreview({ field }: { field: any }) {
         </div>
         <span
           className={`text-[11px] ${
-            on
-              ? "font-medium text-[color:var(--cf-orange)]"
-              : "text-[color:var(--cf-ink-soft)]/55"
+            on ? "font-medium text-[color:var(--cf-orange)]" : "text-[color:var(--cf-ink-soft)]/55"
           }`}
         >
           {o?.activeLabel || "Yes"}
diff --git a/apps/web/components/builder/FormSettingsDialog.tsx b/apps/web/components/builder/FormSettingsDialog.tsx
new file mode 100644
index 0000000..dda5f62
--- /dev/null
+++ b/apps/web/components/builder/FormSettingsDialog.tsx
@@ -0,0 +1,236 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Settings, X, Calendar, ShieldAlert } from "lucide-react";
+import { toast } from "sonner";
+import { useUpdateFormSettings } from "~/hooks/api/form";
+
+interface FormSettingsDialogProps {
+  show: boolean;
+  form: {
+    id: string;
+    title: string;
+    description?: string | null;
+    isOpen: boolean;
+    maxSubmissions?: number | null;
+    expiresAt?: any | null;
+  } | null;
+  onClose: () => void;
+}
+
+const toDatetimeLocal = (d?: string | Date | null) => {
+  if (!d) return "";
+  const date = new Date(d);
+  if (isNaN(date.getTime())) return "";
+  const offset = date.getTimezoneOffset() * 60000;
+  const localDate = new Date(date.getTime() - offset);
+  return localDate.toISOString().slice(0, 16);
+};
+
+export function FormSettingsDialog({ show, form, onClose }: FormSettingsDialogProps) {
+  const { updateFormSettingsAsync, isPending } = useUpdateFormSettings();
+
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [isOpen, setIsOpen] = useState(true);
+  const [enableLimit, setEnableLimit] = useState(false);
+  const [maxSubmissions, setMaxSubmissions] = useState<number | "">("");
+  const [enableExpiration, setEnableExpiration] = useState(false);
+  const [expiresAt, setExpiresAt] = useState("");
+
+  useEffect(() => {
+    if (form) {
+      setTitle(form.title);
+      setDescription(form.description || "");
+      setIsOpen(form.isOpen);
+      setEnableLimit(!!form.maxSubmissions);
+      setMaxSubmissions(form.maxSubmissions ?? "");
+      setEnableExpiration(!!form.expiresAt);
+      setExpiresAt(toDatetimeLocal(form.expiresAt));
+    }
+  }, [form, show]);
+
+  if (!show || !form) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!title.trim()) {
+      toast.error("Form title cannot be empty");
+      return;
+    }
+
+    try {
+      await updateFormSettingsAsync({
+        id: form.id,
+        title: title.trim(),
+        description: description.trim() || null,
+        isOpen,
+        maxSubmissions: enableLimit && maxSubmissions !== "" ? Number(maxSubmissions) : null,
+        expiresAt: enableExpiration && expiresAt ? new Date(expiresAt).toISOString() : null,
+      });
+      toast.success("Settings updated successfully");
+      onClose();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to update form settings");
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-[300] flex items-center justify-center bg-[color:var(--cf-ink)]/45 backdrop-blur-sm p-4">
+      <div className="bg-[color:var(--cf-cream-2)] rounded-2xl ring-1 ring-[color:var(--cf-line-strong)] p-6 max-w-md w-full shadow-[0_30px_80px_-30px_rgba(22,19,17,0.35)] flex flex-col gap-5">
+        {/* Header */}
+        <div className="flex justify-between items-start">
+          <div className="flex items-center gap-2">
+            <div className="p-1.5 rounded-lg bg-[color:var(--cf-orange)]/10 text-[color:var(--cf-orange)]">
+              <Settings className="size-4.5" />
+            </div>
+            <div>
+              <p className="cf-eyebrow text-[color:var(--cf-orange)]">Settings</p>
+              <h3 className="mt-0.5 cf-display text-[20px] leading-tight text-[color:var(--cf-ink)]">
+                Form Settings
+              </h3>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-full hover:bg-[color:var(--cf-cream)] text-[color:var(--cf-ink-soft)] transition-colors cursor-pointer"
+            aria-label="Close dialog"
+          >
+            <X className="size-4.5" />
+          </button>
+        </div>
+
+        <form
+          onSubmit={handleSubmit}
+          className="space-y-4 pt-1 border-t border-[color:var(--cf-line)] text-[13px]"
+        >
+          {/* Title */}
+          <div className="space-y-1.5">
+            <label className="block text-[11px] font-mono uppercase tracking-wider text-[color:var(--cf-ink-soft)]">
+              Form Title
+            </label>
+            <input
+              type="text"
+              required
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              className="w-full bg-[color:var(--cf-cream)] rounded-lg ring-1 ring-[color:var(--cf-line)] px-3 py-1.5 text-[13px] text-[color:var(--cf-ink)] focus:outline-none focus:ring-2 focus:ring-[color:var(--cf-orange)]"
+              placeholder="My Form"
+            />
+          </div>
+
+          {/* Description */}
+          <div className="space-y-1.5">
+            <label className="block text-[11px] font-mono uppercase tracking-wider text-[color:var(--cf-ink-soft)]">
+              Description
+            </label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              rows={3}
+              className="w-full bg-[color:var(--cf-cream)] rounded-lg ring-1 ring-[color:var(--cf-line)] px-3 py-1.5 text-[13px] text-[color:var(--cf-ink)] focus:outline-none focus:ring-2 focus:ring-[color:var(--cf-orange)] resize-none"
+              placeholder="Form description..."
+            />
+          </div>
+
+          {/* Accept Submissions */}
+          <div className="flex items-center justify-between py-2 border-y border-[color:var(--cf-line)]">
+            <div>
+              <p className="font-semibold text-[color:var(--cf-ink)]">Accepting submissions</p>
+              <p className="text-[11px] text-[color:var(--cf-ink-soft)]">
+                Manually open or close this form
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={() => setIsOpen(!isOpen)}
+              className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+                isOpen ? "bg-[color:var(--cf-orange)]" : "bg-[color:var(--cf-line-strong)]"
+              }`}
+            >
+              <span
+                className={`pointer-events-none inline-block size-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                  isOpen ? "translate-x-4" : "translate-x-0"
+                }`}
+              />
+            </button>
+          </div>
+
+          {/* Expiration Date */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-1.5">
+                <Calendar className="size-3.5 text-[color:var(--cf-ink-soft)]" />
+                <span className="font-medium text-[color:var(--cf-ink)]">Set expiration date</span>
+              </div>
+              <input
+                type="checkbox"
+                checked={enableExpiration}
+                onChange={(e) => setEnableExpiration(e.target.checked)}
+                className="accent-[color:var(--cf-orange)] cursor-pointer"
+              />
+            </div>
+            {enableExpiration && (
+              <input
+                type="datetime-local"
+                required={enableExpiration}
+                value={expiresAt}
+                onChange={(e) => setExpiresAt(e.target.value)}
+                className="w-full bg-[color:var(--cf-cream)] rounded-lg ring-1 ring-[color:var(--cf-line)] px-3 py-1.5 text-[13px] text-[color:var(--cf-ink)] focus:outline-none focus:ring-2 focus:ring-[color:var(--cf-orange)]"
+              />
+            )}
+          </div>
+
+          {/* Submission Limit */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-1.5">
+                <ShieldAlert className="size-3.5 text-[color:var(--cf-ink-soft)]" />
+                <span className="font-medium text-[color:var(--cf-ink)]">
+                  Limit total submissions
+                </span>
+              </div>
+              <input
+                type="checkbox"
+                checked={enableLimit}
+                onChange={(e) => setEnableLimit(e.target.checked)}
+                className="accent-[color:var(--cf-orange)] cursor-pointer"
+              />
+            </div>
+            {enableLimit && (
+              <input
+                type="number"
+                required={enableLimit}
+                min={0}
+                placeholder="100"
+                value={maxSubmissions}
+                onChange={(e) =>
+                  setMaxSubmissions(e.target.value === "" ? "" : Number(e.target.value))
+                }
+                className="w-full bg-[color:var(--cf-cream)] rounded-lg ring-1 ring-[color:var(--cf-line)] px-3 py-1.5 text-[13px] text-[color:var(--cf-ink)] focus:outline-none focus:ring-2 focus:ring-[color:var(--cf-orange)]"
+              />
+            )}
+          </div>
+
+          {/* Actions */}
+          <div className="flex justify-end gap-2 pt-3 border-t border-[color:var(--cf-line)]">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-1.5 h-[34px] text-[12px] rounded-lg text-[color:var(--cf-ink)] hover:bg-[color:var(--cf-cream)] ring-1 ring-[color:var(--cf-line-strong)] transition-colors cursor-pointer"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isPending}
+              className="px-5 py-1.5 h-[34px] rounded-lg bg-[color:var(--cf-orange)] hover:bg-[color:var(--cf-orange-hover)] text-white text-[12px] font-medium transition-colors cursor-pointer disabled:opacity-50"
+            >
+              {isPending ? "Saving..." : "Save Settings"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/builder/ShareCollaboratorsDialog.tsx b/apps/web/components/builder/ShareCollaboratorsDialog.tsx
index 7baaa94..8ee0436 100644
--- a/apps/web/components/builder/ShareCollaboratorsDialog.tsx
+++ b/apps/web/components/builder/ShareCollaboratorsDialog.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Copy, Crown, Plus, QrCode, Shield, Trash2, User, X } from "lucide-react";
 import { toast } from "sonner";
 import {
@@ -10,6 +10,8 @@ import {
   useRemoveCollaborator,
   useTransferOwnership,
 } from "~/hooks/api/form";
+import { useSearchUsers } from "~/hooks/api/user";
+import { useDebounce } from "~/hooks/useDebounce";
 
 interface ShareCollaboratorsDialogProps {
   show: boolean;
@@ -40,6 +42,23 @@ export function ShareCollaboratorsDialog({
   const [showQr, setShowQr] = useState(true);
   const { transferOwnershipAsync } = useTransferOwnership();
 
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const suggestionsRef = useRef<HTMLDivElement>(null);
+  const debouncedEmail = useDebounce(email, 200);
+  const { users: suggestions } = useSearchUsers(debouncedEmail);
+
+  useEffect(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      if (suggestionsRef.current && !suggestionsRef.current.contains(e.target as Node)) {
+        setShowSuggestions(false);
+      }
+    };
+    document.addEventListener("mousedown", handleOutsideClick);
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+    };
+  }, []);
+
   if (!show) return null;
 
   const isOwner = role === "owner";
@@ -56,7 +75,7 @@ export function ShareCollaboratorsDialog({
       const response = await fetch(qrUrl);
       const blob = await response.blob();
       const blobUrl = URL.createObjectURL(blob);
-      
+
       const link = document.createElement("a");
       link.href = blobUrl;
       link.download = `${formTitle.toLowerCase().replace(/[^a-z0-9]+/g, "-")}-qr-code.png`;
@@ -133,7 +152,6 @@ export function ShareCollaboratorsDialog({
   return (
     <div className="fixed inset-0 z-[300] flex items-center justify-center bg-[color:var(--cf-ink)]/45 backdrop-blur-sm p-4">
       <div className="bg-[color:var(--cf-cream-2)] rounded-2xl ring-1 ring-[color:var(--cf-line-strong)] p-6 max-w-md w-full shadow-[0_30px_80px_-30px_rgba(22,19,17,0.35)] flex flex-col gap-5">
-        
         {/* Header */}
         <div className="flex justify-between items-start">
           <div>
@@ -203,15 +221,19 @@ export function ShareCollaboratorsDialog({
         )}
 
         {/* Owner Invite Form or Transfer Confirmation */}
-        {isOwner && (
-          confirmTransferUserId ? (
+        {isOwner &&
+          (confirmTransferUserId ? (
             <div className="bg-[color:var(--cf-cream)] p-4 rounded-xl ring-1 ring-[color:var(--cf-orange)]/40 space-y-3">
               <h4 className="font-semibold text-[13.5px] text-[color:var(--cf-ink)] flex items-center gap-1.5">
                 <Crown className="size-4 text-[color:var(--cf-orange)]" />
                 Transfer Ownership?
               </h4>
               <p className="text-[12px] text-[color:var(--cf-ink-soft)] leading-relaxed">
-                Make <span className="font-semibold text-[color:var(--cf-ink)]">{confirmTransferUserEmail}</span> the new owner? You will become an editor collaborator.
+                Make{" "}
+                <span className="font-semibold text-[color:var(--cf-ink)]">
+                  {confirmTransferUserEmail}
+                </span>{" "}
+                the new owner? You will become an editor collaborator.
               </p>
               <div className="flex justify-end gap-2 pt-1">
                 <button
@@ -231,19 +253,48 @@ export function ShareCollaboratorsDialog({
               </div>
             </div>
           ) : (
-            <form onSubmit={handleAdd} className="space-y-1.5 pt-1 border-t border-[color:var(--cf-line)]">
+            <form
+              onSubmit={handleAdd}
+              className="space-y-1.5 pt-1 border-t border-[color:var(--cf-line)]"
+            >
               <label className="block text-[11px] font-mono uppercase tracking-wider text-[color:var(--cf-ink-soft)]">
                 Invite collaborator
               </label>
               <div className="flex gap-2">
-                <input
-                  type="email"
-                  required
-                  placeholder="email@example.com"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  className="flex-1 bg-[color:var(--cf-cream)] rounded-lg ring-1 ring-[color:var(--cf-line)] px-3 py-1.5 text-[13px] text-[color:var(--cf-ink)] focus:outline-none focus:ring-2 focus:ring-[color:var(--cf-orange)]"
-                />
+                <div className="relative flex-1" ref={suggestionsRef}>
+                  <input
+                    type="email"
+                    required
+                    placeholder="email@example.com"
+                    value={email}
+                    onChange={(e) => {
+                      setEmail(e.target.value);
+                      setShowSuggestions(true);
+                    }}
+                    onFocus={() => setShowSuggestions(true)}
+                    className="w-full bg-[color:var(--cf-cream)] rounded-lg ring-1 ring-[color:var(--cf-line)] px-3 py-1.5 text-[13px] text-[color:var(--cf-ink)] focus:outline-none focus:ring-2 focus:ring-[color:var(--cf-orange)]"
+                  />
+                  {showSuggestions && suggestions.length > 0 && (
+                    <div className="absolute left-0 right-0 top-full mt-1 bg-[color:var(--cf-cream-2)] rounded-lg ring-1 ring-[color:var(--cf-line-strong)] shadow-lg max-h-48 overflow-y-auto z-[350] py-1">
+                      {suggestions.map((u) => (
+                        <button
+                          key={u.id}
+                          type="button"
+                          onClick={() => {
+                            setEmail(u.email);
+                            setShowSuggestions(false);
+                          }}
+                          className="w-full text-left px-3 py-2 text-[12.5px] hover:bg-[color:var(--cf-cream)] flex flex-col transition-colors cursor-pointer"
+                        >
+                          <span className="font-medium text-[color:var(--cf-ink)]">{u.name}</span>
+                          <span className="text-[11px] text-[color:var(--cf-ink-soft)]">
+                            {u.email}
+                          </span>
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
                 <select
                   value={inviteRole}
                   onChange={(e) => setInviteRole(e.target.value as "viewer" | "editor")}
@@ -262,8 +313,7 @@ export function ShareCollaboratorsDialog({
                 </button>
               </div>
             </form>
-          )
-        )}
+          ))}
 
         {/* Collaborators List */}
         <div className="space-y-2 pt-1 border-t border-[color:var(--cf-line)]">
@@ -280,7 +330,11 @@ export function ShareCollaboratorsDialog({
                 </div>
                 <div className="min-w-0">
                   <p className="font-medium text-[color:var(--cf-ink)] truncate">Workspace Owner</p>
-                  {ownerEmail && <p className="text-[11px] text-[color:var(--cf-ink-soft)] truncate">{ownerEmail}</p>}
+                  {ownerEmail && (
+                    <p className="text-[11px] text-[color:var(--cf-ink-soft)] truncate">
+                      {ownerEmail}
+                    </p>
+                  )}
                 </div>
               </div>
               <span className="text-[11.5px] font-mono text-[color:var(--cf-ink-soft)] bg-[color:var(--cf-cream)] ring-1 ring-[color:var(--cf-line-strong)] px-2 py-0.5 rounded-full">
@@ -319,7 +373,9 @@ export function ShareCollaboratorsDialog({
                       <>
                         <select
                           value={c.role}
-                          onChange={(e) => handleUpdateRole(c.id, e.target.value as "viewer" | "editor")}
+                          onChange={(e) =>
+                            handleUpdateRole(c.id, e.target.value as "viewer" | "editor")
+                          }
                           className="bg-[color:var(--cf-cream)] rounded-md ring-1 ring-[color:var(--cf-line)] px-2 py-1 text-[11.5px] text-[color:var(--cf-ink)] focus:outline-none cursor-pointer"
                         >
                           <option value="viewer">Viewer</option>
@@ -354,7 +410,6 @@ export function ShareCollaboratorsDialog({
             )}
           </div>
         </div>
-
       </div>
     </div>
   );
diff --git a/apps/web/components/builder/UnsavedDialog.tsx b/apps/web/components/builder/UnsavedDialog.tsx
index 867d54e..f5fac26 100644
--- a/apps/web/components/builder/UnsavedDialog.tsx
+++ b/apps/web/components/builder/UnsavedDialog.tsx
@@ -9,20 +9,13 @@ interface UnsavedDialogProps {
   onSaveAndLeave: () => Promise<void>;
 }
 
-export function UnsavedDialog({
-  show,
-  onCancel,
-  onDiscard,
-  onSaveAndLeave,
-}: UnsavedDialogProps) {
+export function UnsavedDialog({ show, onCancel, onDiscard, onSaveAndLeave }: UnsavedDialogProps) {
   if (!show) return null;
 
   return (
     <div className="fixed inset-0 z-[300] flex items-center justify-center bg-[color:var(--cf-ink)]/45 backdrop-blur-sm p-4">
       <div className="bg-[color:var(--cf-cream-2)] rounded-2xl ring-1 ring-[color:var(--cf-line-strong)] p-7 max-w-sm w-full shadow-[0_30px_80px_-30px_rgba(22,19,17,0.35)]">
-        <p className="cf-eyebrow text-[color:var(--cf-orange)]">
-          Unsaved changes
-        </p>
+        <p className="cf-eyebrow text-[color:var(--cf-orange)]">Unsaved changes</p>
         <h3 className="mt-3 cf-display text-[22px] leading-snug text-[color:var(--cf-ink)]">
           Save before leaving?
         </h3>
diff --git a/apps/web/components/builder/mobile/MobileAddFieldSheet.tsx b/apps/web/components/builder/mobile/MobileAddFieldSheet.tsx
index e11a125..45f107e 100644
--- a/apps/web/components/builder/mobile/MobileAddFieldSheet.tsx
+++ b/apps/web/components/builder/mobile/MobileAddFieldSheet.tsx
@@ -18,11 +18,7 @@ interface MobileAddFieldSheetProps {
   onSelect: (type: string) => void;
 }
 
-export function MobileAddFieldSheet({
-  open,
-  onClose,
-  onSelect,
-}: MobileAddFieldSheetProps) {
+export function MobileAddFieldSheet({ open, onClose, onSelect }: MobileAddFieldSheetProps) {
   // Lock body scroll while sheet is open
   useEffect(() => {
     if (!open) return;
@@ -66,12 +62,8 @@ export function MobileAddFieldSheet({
 
         <div className="px-5 pt-2 pb-4 border-b border-[color:var(--cf-line)] flex items-start justify-between gap-3">
           <div>
-            <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-              Add field
-            </p>
-            <h3 className="mt-1 cf-display text-[22px] leading-tight">
-              Pick a type
-            </h3>
+            <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Add field</p>
+            <h3 className="mt-1 cf-display text-[22px] leading-tight">Pick a type</h3>
           </div>
           <button
             onClick={onClose}
@@ -84,9 +76,7 @@ export function MobileAddFieldSheet({
 
         <div className="flex-1 overflow-y-auto px-4 py-4 space-y-5 overscroll-contain">
           {CATEGORIES.map((cat) => {
-            const items = AVAILABLE_FIELDS.filter((f) =>
-              cat.types.includes(f.type)
-            );
+            const items = AVAILABLE_FIELDS.filter((f) => cat.types.includes(f.type));
             if (items.length === 0) return null;
             return (
               <div key={cat.label}>
diff --git a/apps/web/components/builder/mobile/MobileFieldEditorSheet.tsx b/apps/web/components/builder/mobile/MobileFieldEditorSheet.tsx
index 21fba78..14494c8 100644
--- a/apps/web/components/builder/mobile/MobileFieldEditorSheet.tsx
+++ b/apps/web/components/builder/mobile/MobileFieldEditorSheet.tsx
@@ -3,10 +3,7 @@
 import React, { useEffect } from "react";
 import { Trash2, X } from "lucide-react";
 import { getFieldIcon } from "../FormFieldNode";
-import {
-  FieldInspectorBody,
-  type FieldInspectorProps,
-} from "../FieldInspector";
+import { FieldInspectorBody, type FieldInspectorProps } from "../FieldInspector";
 
 interface MobileFieldEditorSheetProps extends FieldInspectorProps {
   open: boolean;
@@ -70,9 +67,7 @@ export function MobileFieldEditorSheet({
         {/* header */}
         <div className="px-5 pt-2 pb-3 border-b border-[color:var(--cf-line)] flex items-start justify-between gap-3">
           <div className="min-w-0">
-            <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-              Edit field
-            </p>
+            <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Edit field</p>
             <div className="mt-1.5 flex items-center gap-2">
               <div className="inline-flex items-center gap-1.5 bg-[color:var(--cf-cream)] ring-1 ring-[color:var(--cf-line)] px-2 py-0.5 rounded-full">
                 <FieldIcon className="size-3 text-[color:var(--cf-orange)]" />
diff --git a/apps/web/components/builder/mobile/MobileFieldList.tsx b/apps/web/components/builder/mobile/MobileFieldList.tsx
index 44d200f..c8b24fa 100644
--- a/apps/web/components/builder/mobile/MobileFieldList.tsx
+++ b/apps/web/components/builder/mobile/MobileFieldList.tsx
@@ -23,12 +23,7 @@ interface MobileFieldListProps {
  * that opens the edit sheet; reorder is done with up/down arrows since
  * touch drag-and-drop fights vertical scrolling on phones.
  */
-export function MobileFieldList({
-  fields,
-  onTapField,
-  onMove,
-  onAdd,
-}: MobileFieldListProps) {
+export function MobileFieldList({ fields, onTapField, onMove, onAdd }: MobileFieldListProps) {
   return (
     <div className="relative flex-1 flex flex-col overflow-hidden">
       {/* count bar */}
@@ -36,8 +31,7 @@ export function MobileFieldList({
         <div>
           <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Fields</p>
           <p className="text-[12px] font-mono text-[color:var(--cf-ink-soft)] mt-0.5">
-            {fields.length}{" "}
-            {fields.length === 1 ? "field" : "fields"} · tap to edit
+            {fields.length} {fields.length === 1 ? "field" : "fields"} · tap to edit
           </p>
         </div>
       </div>
@@ -92,9 +86,7 @@ function FieldCard({
   onMove: (direction: "up" | "down") => void;
 }) {
   const Icon = getFieldIcon(field.type);
-  const displayLabel =
-    field.label ||
-    `Untitled ${field.type.replace("_", " ").toLowerCase()}`;
+  const displayLabel = field.label || `Untitled ${field.type.replace("_", " ").toLowerCase()}`;
 
   return (
     <div className="bg-[color:var(--cf-cream-2)] rounded-xl ring-1 ring-[color:var(--cf-line)] active:ring-[color:var(--cf-line-strong)] transition-shadow overflow-hidden">
@@ -170,12 +162,9 @@ function EmptyState({ onAdd }: { onAdd: () => void }) {
   return (
     <div className="bg-[color:var(--cf-cream-2)] rounded-xl ring-1 ring-dashed ring-[color:var(--cf-line-strong)] p-8 text-center space-y-4 mt-6">
       <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Empty canvas</p>
-      <h3 className="cf-display text-[24px] leading-tight">
-        Add your first field
-      </h3>
+      <h3 className="cf-display text-[24px] leading-tight">Add your first field</h3>
       <p className="text-[13px] text-[color:var(--cf-ink-soft)] leading-relaxed max-w-xs mx-auto">
-        Build your form one question at a time. Tap below to pick a field
-        type.
+        Build your form one question at a time. Tap below to pick a field type.
       </p>
       <button
         onClick={onAdd}
diff --git a/apps/web/components/forms/FormErrorState.tsx b/apps/web/components/forms/FormErrorState.tsx
index 1fb95ec..e588d45 100644
--- a/apps/web/components/forms/FormErrorState.tsx
+++ b/apps/web/components/forms/FormErrorState.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { ArrowUpRight } from "lucide-react";
 
 interface FormErrorStateProps {
-  type: "not-found" | "draft-mode" | "already-submitted";
+  type: "not-found" | "draft-mode" | "already-submitted" | "closed" | "expired" | "limit-reached";
 }
 
 export function FormErrorState({ type }: FormErrorStateProps) {
@@ -17,23 +17,39 @@ export function FormErrorState({ type }: FormErrorStateProps) {
           body: "The author hasn't published it yet, so it isn't accepting responses.",
         }
       : type === "already-submitted"
-      ? {
-          eyebrow: "Already submitted",
-          title: "You've responded to this form",
-          body: "Each visitor can submit this form once. Thanks — we already have your response on file.",
-        }
-      : {
-          eyebrow: "Not found",
-          title: "We can't find this form",
-          body: "The form may have been deleted, or the link is incorrect. Double-check the URL.",
-        };
+        ? {
+            eyebrow: "Already submitted",
+            title: "You've responded to this form",
+            body: "Each visitor can submit this form once. Thanks — we already have your response on file.",
+          }
+        : type === "closed"
+          ? {
+              eyebrow: "Closed",
+              title: "Form is closed",
+              body: "The author has closed this form to new responses.",
+            }
+          : type === "expired"
+            ? {
+                eyebrow: "Expired",
+                title: "Form has expired",
+                body: "This form has passed its expiration date and is no longer accepting submissions.",
+              }
+            : type === "limit-reached"
+              ? {
+                  eyebrow: "Limit reached",
+                  title: "Submission limit reached",
+                  body: "This form has reached its maximum allowed number of submissions.",
+                }
+              : {
+                  eyebrow: "Not found",
+                  title: "We can't find this form",
+                  body: "The form may have been deleted, or the link is incorrect. Double-check the URL.",
+                };
 
   return (
     <div className="cf-landing min-h-screen w-full flex items-center justify-center bg-[color:var(--cf-cream)] p-6">
       <div className="w-full max-w-sm bg-[color:var(--cf-cream-2)] rounded-2xl ring-1 ring-[color:var(--cf-line)] p-8 text-center space-y-4">
-        <p className="cf-eyebrow text-[color:var(--cf-orange)]">
-          {config.eyebrow}
-        </p>
+        <p className="cf-eyebrow text-[color:var(--cf-orange)]">{config.eyebrow}</p>
         <h2 className="cf-display text-[24px] leading-tight text-[color:var(--cf-ink)]">
           {config.title}
         </h2>
diff --git a/apps/web/components/forms/FormHeader.tsx b/apps/web/components/forms/FormHeader.tsx
index 104f54b..ea74983 100644
--- a/apps/web/components/forms/FormHeader.tsx
+++ b/apps/web/components/forms/FormHeader.tsx
@@ -10,25 +10,14 @@ interface FormHeaderProps {
   formTitle?: string;
 }
 
-export function FormHeader({
-  progressPercent,
-  submitted,
-  formCode,
-  formTitle,
-}: FormHeaderProps) {
+export function FormHeader({ progressPercent, submitted, formCode, formTitle }: FormHeaderProps) {
   const pct = submitted ? 100 : progressPercent;
 
   return (
     <header className="w-full max-w-2xl flex items-center justify-between gap-4">
       {/* brand */}
       <div className="flex items-center gap-2 min-w-0">
-        <Image
-          src="/logo.svg"
-          alt=""
-          width={20}
-          height={20}
-          className="object-contain shrink-0"
-        />
+        <Image src="/logo.svg" alt="" width={20} height={20} className="object-contain shrink-0" />
         <span className="cf-display text-[16px] leading-none text-[color:var(--cf-ink)] truncate">
           {formTitle || "CanvasFlow"}
         </span>
@@ -45,9 +34,7 @@ export function FormHeader({
             style={{ width: `${pct}%` }}
           />
         </div>
-        <span className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-          {formCode}
-        </span>
+        <span className="cf-eyebrow text-[color:var(--cf-ink-soft)]">{formCode}</span>
       </div>
     </header>
   );
diff --git a/apps/web/components/forms/FormLoadingState.tsx b/apps/web/components/forms/FormLoadingState.tsx
index f690c02..1612fdd 100644
--- a/apps/web/components/forms/FormLoadingState.tsx
+++ b/apps/web/components/forms/FormLoadingState.tsx
@@ -7,9 +7,7 @@ export function FormLoadingState() {
     <div className="cf-landing min-h-screen w-full flex items-center justify-center bg-[color:var(--cf-cream)]">
       <div className="flex flex-col items-center gap-3">
         <div className="w-8 h-8 rounded-full border-2 border-[color:var(--cf-line-strong)] border-t-[color:var(--cf-orange)] animate-spin" />
-        <span className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-          Loading form...
-        </span>
+        <span className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Loading form...</span>
       </div>
     </div>
   );
diff --git a/apps/web/components/forms/FormQuestion.tsx b/apps/web/components/forms/FormQuestion.tsx
index d030b19..1a1d13d 100644
--- a/apps/web/components/forms/FormQuestion.tsx
+++ b/apps/web/components/forms/FormQuestion.tsx
@@ -45,10 +45,7 @@ export function FormQuestion({
     : (currentField.options as any)?.choices || [];
 
   return (
-    <div
-      key={currentQuestionIndex}
-      className="w-full max-w-xl space-y-8 cf-animate-card"
-    >
+    <div key={currentQuestionIndex} className="w-full max-w-xl space-y-8 cf-animate-card">
       {/* progress eyebrow */}
       <div className="flex items-center justify-center gap-2 cf-eyebrow text-[color:var(--cf-ink-soft)]">
         <span>
@@ -81,9 +78,7 @@ export function FormQuestion({
             type="text"
             placeholder={currentField.placeholder || "Type your answer..."}
             value={answers[currentField.id] || ""}
-            onChange={(e) =>
-              handleFieldChange(currentField.id, e.target.value)
-            }
+            onChange={(e) => handleFieldChange(currentField.id, e.target.value)}
             className={INPUT_CLS}
           />
         )}
@@ -92,9 +87,7 @@ export function FormQuestion({
           <textarea
             placeholder={currentField.placeholder || "Type your answer..."}
             value={answers[currentField.id] || ""}
-            onChange={(e) =>
-              handleFieldChange(currentField.id, e.target.value)
-            }
+            onChange={(e) => handleFieldChange(currentField.id, e.target.value)}
             rows={4}
             className="w-full bg-[color:var(--cf-cream)] rounded-lg ring-1 ring-[color:var(--cf-line-strong)] focus:ring-2 focus:ring-[color:var(--cf-orange)] focus:outline-none px-5 py-4 text-[16px] text-[color:var(--cf-ink)] placeholder:text-[color:var(--cf-ink-soft)]/55 resize-none transition-shadow"
           />
@@ -105,9 +98,7 @@ export function FormQuestion({
             type="email"
             placeholder={currentField.placeholder || "name@domain.com"}
             value={answers[currentField.id] || ""}
-            onChange={(e) =>
-              handleFieldChange(currentField.id, e.target.value)
-            }
+            onChange={(e) => handleFieldChange(currentField.id, e.target.value)}
             className={INPUT_CLS}
             autoComplete="email"
           />
@@ -118,9 +109,7 @@ export function FormQuestion({
             type="number"
             placeholder={currentField.placeholder || "0"}
             value={answers[currentField.id] || ""}
-            onChange={(e) =>
-              handleFieldChange(currentField.id, e.target.value)
-            }
+            onChange={(e) => handleFieldChange(currentField.id, e.target.value)}
             className={INPUT_CLS}
           />
         )}
@@ -130,9 +119,7 @@ export function FormQuestion({
             type="tel"
             placeholder={currentField.placeholder || "+1 (555) 000-0000"}
             value={answers[currentField.id] || ""}
-            onChange={(e) =>
-              handleFieldChange(currentField.id, e.target.value)
-            }
+            onChange={(e) => handleFieldChange(currentField.id, e.target.value)}
             className={INPUT_CLS}
             autoComplete="tel"
           />
@@ -143,9 +130,7 @@ export function FormQuestion({
             type="url"
             placeholder={currentField.placeholder || "https://example.com"}
             value={answers[currentField.id] || ""}
-            onChange={(e) =>
-              handleFieldChange(currentField.id, e.target.value)
-            }
+            onChange={(e) => handleFieldChange(currentField.id, e.target.value)}
             className={INPUT_CLS}
           />
         )}
@@ -234,15 +219,12 @@ export function FormQuestion({
               length: (currentField.options as any)?.max || 5,
             }).map((_, i) => {
               const score = i + 1;
-              const isStarred =
-                (answers[currentField.id] || 0) >= score;
+              const isStarred = (answers[currentField.id] || 0) >= score;
               return (
                 <button
                   key={i}
                   type="button"
-                  onClick={() =>
-                    handleFieldChange(currentField.id, score)
-                  }
+                  onClick={() => handleFieldChange(currentField.id, score)}
                   className="p-1.5 hover:scale-110 transition-transform cursor-pointer"
                   aria-label={`Rate ${score}`}
                 >
@@ -266,9 +248,7 @@ export function FormQuestion({
               min={(currentField.options as any)?.minDate || undefined}
               max={(currentField.options as any)?.maxDate || undefined}
               value={answers[currentField.id] || ""}
-              onChange={(e) =>
-                handleFieldChange(currentField.id, e.target.value)
-              }
+              onChange={(e) => handleFieldChange(currentField.id, e.target.value)}
               className={`${INPUT_CLS} pr-12 text-center`}
             />
             <Calendar className="absolute right-4 top-1/2 -translate-y-1/2 size-4 text-[color:var(--cf-ink-soft)] pointer-events-none" />
@@ -282,9 +262,7 @@ export function FormQuestion({
               min={(currentField.options as any)?.minTime || undefined}
               max={(currentField.options as any)?.maxTime || undefined}
               value={answers[currentField.id] || ""}
-              onChange={(e) =>
-                handleFieldChange(currentField.id, e.target.value)
-              }
+              onChange={(e) => handleFieldChange(currentField.id, e.target.value)}
               className={`${INPUT_CLS} pr-12 text-center`}
             />
             <Clock className="absolute right-4 top-1/2 -translate-y-1/2 size-4 text-[color:var(--cf-ink-soft)] pointer-events-none" />
@@ -304,12 +282,7 @@ export function FormQuestion({
             </span>
             <button
               type="button"
-              onClick={() =>
-                handleFieldChange(
-                  currentField.id,
-                  !answers[currentField.id]
-                )
-              }
+              onClick={() => handleFieldChange(currentField.id, !answers[currentField.id])}
               className={`relative inline-flex h-7 w-12 shrink-0 cursor-pointer rounded-full transition-colors focus:outline-none ${
                 answers[currentField.id]
                   ? "bg-[color:var(--cf-orange)]"
@@ -319,9 +292,7 @@ export function FormQuestion({
             >
               <span
                 className={`pointer-events-none inline-block size-5 mt-1 transform rounded-full bg-white shadow transition-transform ${
-                  answers[currentField.id]
-                    ? "translate-x-6"
-                    : "translate-x-1"
+                  answers[currentField.id] ? "translate-x-6" : "translate-x-1"
                 }`}
               />
             </button>
@@ -356,11 +327,7 @@ export function FormQuestion({
           disabled={isPending}
           className="group inline-flex items-center gap-1.5 h-[44px] px-6 bg-[color:var(--cf-orange)] hover:bg-[color:var(--cf-orange-hover)] disabled:opacity-60 disabled:cursor-not-allowed text-white rounded-full text-[14px] font-medium tracking-tight transition-colors cursor-pointer"
         >
-          {isLast
-            ? isPending
-              ? "Submitting..."
-              : "Submit"
-            : "Next"}
+          {isLast ? (isPending ? "Submitting..." : "Submit") : "Next"}
           <ArrowUpRight className="size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
         </button>
       </div>
diff --git a/apps/web/components/forms/FormThankYou.tsx b/apps/web/components/forms/FormThankYou.tsx
index 0df7476..b6a8d33 100644
--- a/apps/web/components/forms/FormThankYou.tsx
+++ b/apps/web/components/forms/FormThankYou.tsx
@@ -38,15 +38,12 @@ export function FormThankYou({ siteRating, setSiteRating }: FormThankYouProps) {
 
       {/* message */}
       <div className="space-y-3">
-        <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-          Response received
-        </p>
+        <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Response received</p>
         <h2 className="cf-display text-[34px] sm:text-[40px] leading-tight text-[color:var(--cf-ink)]">
           Thanks for your time.
         </h2>
         <p className="text-[14.5px] text-[color:var(--cf-ink-soft)] leading-relaxed max-w-sm mx-auto">
-          Your response has been recorded. You can close this tab whenever
-          you&apos;re ready.
+          Your response has been recorded. You can close this tab whenever you&apos;re ready.
         </p>
       </div>
 
diff --git a/apps/web/components/landing/ArticleTrio.tsx b/apps/web/components/landing/ArticleTrio.tsx
index 002e09d..bb4d8df 100644
--- a/apps/web/components/landing/ArticleTrio.tsx
+++ b/apps/web/components/landing/ArticleTrio.tsx
@@ -15,20 +15,17 @@ import { motion } from "motion/react";
 const ARTICLES = [
   {
     eyebrow: "Why CanvasFlow",
-    body:
-      "Most form tools force a tradeoff between a tidy linear builder and the messy reality of branching logic. CanvasFlow keeps both in one warm, visual canvas.",
+    body: "Most form tools force a tradeoff between a tidy linear builder and the messy reality of branching logic. CanvasFlow keeps both in one warm, visual canvas.",
     img: "/new-image-4.png",
   },
   {
     eyebrow: "The brittle stack",
-    body:
-      "Renaming a field shouldn't break your webhooks. CanvasFlow locks every field to an immutable key the moment it's created, so your data layer stays stable forever.",
+    body: "Renaming a field shouldn't break your webhooks. CanvasFlow locks every field to an immutable key the moment it's created, so your data layer stays stable forever.",
     img: "/new-image-5.png",
   },
   {
     eyebrow: "One form at a time",
-    body:
-      "Every published form makes the studio more useful: shared field templates, reusable answer routes, and analytics that compound across your projects.",
+    body: "Every published form makes the studio more useful: shared field templates, reusable answer routes, and analytics that compound across your projects.",
     img: "/new-image-6.png",
   },
 ];
@@ -37,9 +34,7 @@ const EASE = [0.22, 1, 0.36, 1] as const;
 
 export function ArticleTrio() {
   return (
-    <section
-      className="relative bg-[color:var(--cf-cream)] text-[color:var(--cf-ink)]"
-    >
+    <section className="relative bg-[color:var(--cf-cream)] text-[color:var(--cf-ink)]">
       <div className="mx-auto w-full max-w-[1320px] px-0 border-t border-[color:var(--cf-line)]">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-0">
           {ARTICLES.map((a, i) => (
diff --git a/apps/web/components/landing/CutDropOff.tsx b/apps/web/components/landing/CutDropOff.tsx
index 1a53af1..12edda2 100644
--- a/apps/web/components/landing/CutDropOff.tsx
+++ b/apps/web/components/landing/CutDropOff.tsx
@@ -19,10 +19,7 @@ const EASE = [0.22, 1, 0.36, 1] as const;
 
 export function CutDropOff() {
   return (
-    <section
-      id="story"
-      className="relative bg-[color:var(--cf-cream)] text-[color:var(--cf-ink)]"
-    >
+    <section id="story" className="relative bg-[color:var(--cf-cream)] text-[color:var(--cf-ink)]">
       <div className="relative mx-auto w-full max-w-[1320px] px-0">
         {/* horizontal divider line at the top, like Daylight */}
         <div className="absolute inset-x-4 sm:inset-x-6 md:inset-x-8 top-0 h-px bg-[color:var(--cf-line)]" />
diff --git a/apps/web/components/landing/FooterSunset.tsx b/apps/web/components/landing/FooterSunset.tsx
index af877ab..4de4718 100644
--- a/apps/web/components/landing/FooterSunset.tsx
+++ b/apps/web/components/landing/FooterSunset.tsx
@@ -23,9 +23,7 @@ export function FooterSunset() {
               height={36}
               className="object-contain"
             />
-            <span className="cf-display text-[26px] leading-none">
-              CanvasFlow
-            </span>
+            <span className="cf-display text-[26px] leading-none">CanvasFlow</span>
           </div>
 
           <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8 md:gap-10">
@@ -35,12 +33,10 @@ export function FooterSunset() {
 
             {/* small editorial colophon to balance the right side */}
             <aside className="md:max-w-[260px] md:pb-6 md:text-right shrink-0 space-y-3">
-              <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-                Colophon 
-              </p>
+              <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Colophon</p>
               <p className="text-[13.5px] leading-relaxed text-[color:var(--cf-ink-soft)]">
-                A studio for makers of beautiful data. Drafted in cream paper,
-                shipped on the open canvas.
+                A studio for makers of beautiful data. Drafted in cream paper, shipped on the open
+                canvas.
               </p>
               <p className="inline-flex items-center gap-2 text-[12px] font-mono text-[color:var(--cf-ink)] md:justify-end">
                 <span className="relative flex h-2 w-2">
diff --git a/apps/web/components/landing/HeroSunset.tsx b/apps/web/components/landing/HeroSunset.tsx
index 69b1f0a..4bd0bd8 100644
--- a/apps/web/components/landing/HeroSunset.tsx
+++ b/apps/web/components/landing/HeroSunset.tsx
@@ -32,8 +32,8 @@ export function HeroSunset({ isLoggedIn }: { isLoggedIn: boolean }) {
             <span className="block">in golden hour.</span>
           </h1>
           <p className="mt-6 sm:mt-7 max-w-md text-[14px] sm:text-[15px] leading-relaxed text-white/85">
-            Drag and drop builder, durable data keys, real-time analytics. Free
-            to start — no credit card required.
+            Drag and drop builder, durable data keys, real-time analytics. Free to start — no credit
+            card required.
           </p>
 
           <Link
diff --git a/apps/web/components/landing/HowItWorks.tsx b/apps/web/components/landing/HowItWorks.tsx
index c51495b..76c8ac1 100644
--- a/apps/web/components/landing/HowItWorks.tsx
+++ b/apps/web/components/landing/HowItWorks.tsx
@@ -17,23 +17,20 @@ const STEPS = [
     n: "step 1",
     h: "Open the canvas",
     s: "A canvas you can sketch on",
-    body:
-      "Drag fields onto an open canvas, connect them like nodes, and watch logic appear in the same place as layout.",
+    body: "Drag fields onto an open canvas, connect them like nodes, and watch logic appear in the same place as layout.",
     cta: { label: "Get your estimate", href: "/signUp" },
   },
   {
     n: "Step 2",
     h: "We handle the wiring",
     s: "CanvasFlow handles everything",
-    body:
-      "Field keys are slugged into permanent identifiers the moment you create them. Rename labels freely; your endpoints, exports, and webhooks keep flowing.",
+    body: "Field keys are slugged into permanent identifiers the moment you create them. Rename labels freely; your endpoints, exports, and webhooks keep flowing.",
   },
   {
     n: "Step 3",
     h: "Publish & measure",
     s: "Responses you control",
-    body:
-      "Share a single link. Submissions, devices, and conversion rates light up your dashboard the instant they arrive.",
+    body: "Share a single link. Submissions, devices, and conversion rates light up your dashboard the instant they arrive.",
     chart: true,
   },
 ];
@@ -58,17 +55,15 @@ export function HowItWorks({ isLoggedIn }: { isLoggedIn: boolean }) {
             viewport={{ once: true, amount: 0.4 }}
             transition={{ duration: 0.8, ease: EASE }}
           >
-            <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-              How CanvasFlow Works
-            </p>
+            <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">How CanvasFlow Works</p>
             <h2 className="mt-4 sm:mt-5 cf-display text-[36px] sm:text-[52px] md:text-[64px] lg:text-[72px] leading-[0.95]">
               A new way to build
               <span className="block">your forms</span>
             </h2>
             <p className="mt-6 max-w-md text-[15px] leading-relaxed text-[color:var(--cf-ink-soft)]">
-              With CanvasFlow, your form generates and stores responses with durable
-              keys and real-time analytics. We cover the infrastructure and upfront
-              setup. You get instant publishing and below-spreadsheet pricing.
+              With CanvasFlow, your form generates and stores responses with durable keys and
+              real-time analytics. We cover the infrastructure and upfront setup. You get instant
+              publishing and below-spreadsheet pricing.
             </p>
             <Link
               href={isLoggedIn ? "/dashboard" : "/signUp"}
@@ -92,9 +87,7 @@ export function HowItWorks({ isLoggedIn }: { isLoggedIn: boolean }) {
               >
                 <div className="flex items-start justify-between gap-4 sm:gap-6">
                   <div className="flex-1 min-w-0">
-                    <p className="cf-eyebrow text-[color:var(--cf-orange)]">
-                      {step.n}
-                    </p>
+                    <p className="cf-eyebrow text-[color:var(--cf-orange)]">{step.n}</p>
                     <h3 className="mt-3 sm:mt-4 cf-display text-[22px] sm:text-[26px] md:text-[30px] leading-tight">
                       {step.h}
                     </h3>
@@ -156,9 +149,7 @@ function StepChart() {
       className="mt-8 bg-[color:var(--cf-cream)] rounded-[14px] p-5 ring-1 ring-[color:var(--cf-line)]"
     >
       <div className="flex items-baseline justify-between">
-        <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">
-          Response Earnings
-        </p>
+        <p className="cf-eyebrow text-[color:var(--cf-ink-soft)]">Response Earnings</p>
         <motion.p
           className="text-[13px] font-medium text-[color:var(--cf-ink-soft)]"
           initial={{ opacity: 0 }}
@@ -190,10 +181,7 @@ function StepChart() {
         </motion.span>
       </div>
 
-      <div
-        className="mt-4 grid grid-cols-7 gap-1.5 items-end"
-        style={{ height: `${maxH}px` }}
-      >
+      <div className="mt-4 grid grid-cols-7 gap-1.5 items-end" style={{ height: `${maxH}px` }}>
         {heights.map((h, i) => (
           <motion.div
             key={i}
diff --git a/apps/web/components/landing/LandingNavSunset.tsx b/apps/web/components/landing/LandingNavSunset.tsx
index 6ff75d6..cecd324 100644
--- a/apps/web/components/landing/LandingNavSunset.tsx
+++ b/apps/web/components/landing/LandingNavSunset.tsx
@@ -18,13 +18,7 @@ export function LandingNavSunset({ isLoggedIn }: { isLoggedIn: boolean }) {
         className="flex items-center gap-3 sm:gap-6 md:gap-10 bg-white rounded-lg pl-4 sm:pl-5 pr-1.5 py-1.5 shadow-[0_10px_30px_-12px_rgba(22,19,17,0.18)] ring-1 ring-[color:var(--cf-line-strong)] max-w-[calc(100vw-2rem)]"
       >
         <Link href="/" className="flex items-center gap-2.5 shrink-0" aria-label="Home">
-          <Image
-            src="/logo.svg"
-            alt=""
-            width={22}
-            height={22}
-            className="object-contain"
-          />
+          <Image src="/logo.svg" alt="" width={22} height={22} className="object-contain" />
           <span className="cf-display text-[18px] sm:text-[19px] leading-none text-[color:var(--cf-ink)]">
             CanvasFlow
           </span>
diff --git a/apps/web/components/landing/NetworkSection.tsx b/apps/web/components/landing/NetworkSection.tsx
index c8597fe..8dc4b86 100644
--- a/apps/web/components/landing/NetworkSection.tsx
+++ b/apps/web/components/landing/NetworkSection.tsx
@@ -21,9 +21,8 @@ export function NetworkSection({ isLoggedIn }: { isLoggedIn: boolean }) {
           <span className="block">the studio stronger</span>
         </h2>
         <p className="mx-auto mt-5 sm:mt-6 max-w-xl text-[14px] sm:text-[15px] leading-relaxed text-[color:var(--cf-ink-soft)]">
-          CanvasFlow forms generate, store, and share fields locally to your
-          workspace. Together they form a studio that scales with every new
-          template and route you publish.
+          CanvasFlow forms generate, store, and share fields locally to your workspace. Together
+          they form a studio that scales with every new template and route you publish.
         </p>
         <Link
           href={isLoggedIn ? "/dashboard" : "/signUp"}
diff --git a/apps/web/components/landing/StepIntoCanvasFlow.tsx b/apps/web/components/landing/StepIntoCanvasFlow.tsx
index 1db5384..e7869c0 100644
--- a/apps/web/components/landing/StepIntoCanvasFlow.tsx
+++ b/apps/web/components/landing/StepIntoCanvasFlow.tsx
@@ -22,21 +22,14 @@ export function StepIntoCanvasFlow({ isLoggedIn }: { isLoggedIn: boolean }) {
 
         <div className="mt-10 sm:mt-16 flex flex-col items-center gap-6 sm:gap-8">
           <div className="relative w-14 h-14 sm:w-16 sm:h-16">
-            <Image
-              src="/logo.svg"
-              alt="CanvasFlow"
-              fill
-              sizes="64px"
-              className="object-contain"
-            />
+            <Image src="/logo.svg" alt="CanvasFlow" fill sizes="64px" className="object-contain" />
           </div>
           <h3 className="cf-display text-[24px] sm:text-[34px] leading-tight text-center max-w-md px-4">
             The canvas is bright
           </h3>
           <p className="text-[14px] sm:text-[15px] leading-relaxed text-[color:var(--cf-ink-soft)] text-center max-w-md px-4">
-            Ready to take control of your forms? It&apos;s time to step out of
-            spreadsheet templates and into a more resilient, real-time data
-            future.
+            Ready to take control of your forms? It&apos;s time to step out of spreadsheet templates
+            and into a more resilient, real-time data future.
           </p>
           <Link
             href={isLoggedIn ? "/dashboard" : "/signUp"}
diff --git a/apps/web/components/landing/TrackInApp.tsx b/apps/web/components/landing/TrackInApp.tsx
index 40749dd..efe9a73 100644
--- a/apps/web/components/landing/TrackInApp.tsx
+++ b/apps/web/components/landing/TrackInApp.tsx
@@ -11,9 +11,7 @@ import Image from "next/image";
  */
 export function TrackInApp() {
   return (
-    <section
-      className="relative bg-[color:var(--cf-cream)] text-[color:var(--cf-ink)] overflow-hidden"
-    >
+    <section className="relative bg-[color:var(--cf-cream)] text-[color:var(--cf-ink)] overflow-hidden">
       <div className="relative mx-auto w-full max-w-[1320px] px-0 border-t border-[color:var(--cf-line)]">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-0">
           {/* left: empty paper column (desktop only) */}
diff --git a/apps/web/components/ui/accordion.tsx b/apps/web/components/ui/accordion.tsx
index 1a4eaca..a0cb8ff 100644
--- a/apps/web/components/ui/accordion.tsx
+++ b/apps/web/components/ui/accordion.tsx
@@ -1,15 +1,13 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
-function Accordion({
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
 }
 
 function AccordionItem({
@@ -22,7 +20,7 @@ function AccordionItem({
       className={cn("border-b last:border-b-0", className)}
       {...props}
     />
-  )
+  );
 }
 
 function AccordionTrigger({
@@ -36,7 +34,7 @@ function AccordionTrigger({
         data-slot="accordion-trigger"
         className={cn(
           "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className
+          className,
         )}
         {...props}
       >
@@ -44,7 +42,7 @@ function AccordionTrigger({
         <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
-  )
+  );
 }
 
 function AccordionContent({
@@ -60,7 +58,7 @@ function AccordionContent({
     >
       <div className={cn("pt-0 pb-4", className)}>{children}</div>
     </AccordionPrimitive.Content>
-  )
+  );
 }
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/apps/web/components/ui/alert-dialog.tsx b/apps/web/components/ui/alert-dialog.tsx
index bfd8243..1f9c398 100644
--- a/apps/web/components/ui/alert-dialog.tsx
+++ b/apps/web/components/ui/alert-dialog.tsx
@@ -1,31 +1,23 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
-import { cn } from "~/lib/utils"
-import { buttonVariants } from "~/components/ui/button"
+import { cn } from "~/lib/utils";
+import { buttonVariants } from "~/components/ui/button";
 
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+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} />
-  )
+  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 AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
 }
 
 function AlertDialogOverlay({
@@ -37,11 +29,11 @@ function AlertDialogOverlay({
       data-slot="alert-dialog-overlay"
       className={cn(
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogContent({
@@ -55,41 +47,32 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         className={cn(
           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
+          className,
         )}
         {...props}
       />
     </AlertDialogPortal>
-  )
+  );
 }
 
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-dialog-header"
       className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
       {...props}
     />
-  )
+  );
 }
 
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogTitle({
@@ -102,7 +85,7 @@ function AlertDialogTitle({
       className={cn("text-lg font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogDescription({
@@ -115,19 +98,14 @@ function AlertDialogDescription({
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogAction({
   className,
   ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
-      {...props}
-    />
-  )
+  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;
 }
 
 function AlertDialogCancel({
@@ -139,7 +117,7 @@ function AlertDialogCancel({
       className={cn(buttonVariants({ variant: "outline" }), className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -154,4 +132,4 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
-}
+};
diff --git a/apps/web/components/ui/alert.tsx b/apps/web/components/ui/alert.tsx
index 56b3946..c639e60 100644
--- a/apps/web/components/ui/alert.tsx
+++ b/apps/web/components/ui/alert.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 const alertVariants = cva(
   "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
@@ -16,8 +16,8 @@ const alertVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 function Alert({
   className,
@@ -31,36 +31,30 @@ function Alert({
       className={cn(alertVariants({ variant }), className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-title"
-      className={cn(
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className
-      )}
+      className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
       {...props}
     />
-  )
+  );
 }
 
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-description"
       className={cn(
         "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };
diff --git a/apps/web/components/ui/aspect-ratio.tsx b/apps/web/components/ui/aspect-ratio.tsx
index 3df3fd0..59d6b35 100644
--- a/apps/web/components/ui/aspect-ratio.tsx
+++ b/apps/web/components/ui/aspect-ratio.tsx
@@ -1,11 +1,9 @@
-"use client"
+"use client";
 
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
 
-function AspectRatio({
-  ...props
-}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
-  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
 }
 
-export { AspectRatio }
+export { AspectRatio };
diff --git a/apps/web/components/ui/avatar.tsx b/apps/web/components/ui/avatar.tsx
index 70cee5f..33de341 100644
--- a/apps/web/components/ui/avatar.tsx
+++ b/apps/web/components/ui/avatar.tsx
@@ -1,37 +1,28 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
-function Avatar({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
   return (
     <AvatarPrimitive.Root
       data-slot="avatar"
-      className={cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className
-      )}
+      className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
       {...props}
     />
-  )
+  );
 }
 
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
   return (
     <AvatarPrimitive.Image
       data-slot="avatar-image"
       className={cn("aspect-square size-full", className)}
       {...props}
     />
-  )
+  );
 }
 
 function AvatarFallback({
@@ -41,13 +32,10 @@ function AvatarFallback({
   return (
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
-      className={cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
-        className
-      )}
+      className={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/apps/web/components/ui/badge.tsx b/apps/web/components/ui/badge.tsx
index e718b12..f9fee49 100644
--- a/apps/web/components/ui/badge.tsx
+++ b/apps/web/components/ui/badge.tsx
@@ -1,46 +1,39 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
       variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive:
           "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
       },
     },
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 function Badge({
   className,
   variant,
   asChild = false,
   ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
 
   return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
+    <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
diff --git a/apps/web/components/ui/breadcrumb.tsx b/apps/web/components/ui/breadcrumb.tsx
index 6da6cbc..1c75db0 100644
--- a/apps/web/components/ui/breadcrumb.tsx
+++ b/apps/web/components/ui/breadcrumb.tsx
@@ -1,11 +1,11 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
-  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
 }
 
 function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
@@ -14,11 +14,11 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
       data-slot="breadcrumb-list"
       className={cn(
         "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
@@ -28,7 +28,7 @@ function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
       className={cn("inline-flex items-center gap-1.5", className)}
       {...props}
     />
-  )
+  );
 }
 
 function BreadcrumbLink({
@@ -36,9 +36,9 @@ function BreadcrumbLink({
   className,
   ...props
 }: React.ComponentProps<"a"> & {
-  asChild?: boolean
+  asChild?: boolean;
 }) {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? Slot : "a";
 
   return (
     <Comp
@@ -46,7 +46,7 @@ function BreadcrumbLink({
       className={cn("hover:text-foreground transition-colors", className)}
       {...props}
     />
-  )
+  );
 }
 
 function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
@@ -59,14 +59,10 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
       className={cn("text-foreground font-normal", className)}
       {...props}
     />
-  )
+  );
 }
 
-function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) {
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
   return (
     <li
       data-slot="breadcrumb-separator"
@@ -77,13 +73,10 @@ function BreadcrumbSeparator({
     >
       {children ?? <ChevronRight />}
     </li>
-  )
+  );
 }
 
-function BreadcrumbEllipsis({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="breadcrumb-ellipsis"
@@ -95,7 +88,7 @@ function BreadcrumbEllipsis({
       <MoreHorizontal className="size-4" />
       <span className="sr-only">More</span>
     </span>
-  )
+  );
 }
 
 export {
@@ -106,4 +99,4 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
-}
+};
diff --git a/apps/web/components/ui/button-group.tsx b/apps/web/components/ui/button-group.tsx
index 5b36d55..c0969bd 100644
--- a/apps/web/components/ui/button-group.tsx
+++ b/apps/web/components/ui/button-group.tsx
@@ -1,8 +1,8 @@
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "~/lib/utils"
-import { Separator } from "~/components/ui/separator"
+import { cn } from "~/lib/utils";
+import { Separator } from "~/components/ui/separator";
 
 const buttonGroupVariants = cva(
   "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
@@ -18,8 +18,8 @@ const buttonGroupVariants = cva(
     defaultVariants: {
       orientation: "horizontal",
     },
-  }
-)
+  },
+);
 
 function ButtonGroup({
   className,
@@ -34,7 +34,7 @@ function ButtonGroup({
       className={cn(buttonGroupVariants({ orientation }), className)}
       {...props}
     />
-  )
+  );
 }
 
 function ButtonGroupText({
@@ -42,19 +42,19 @@ function ButtonGroupText({
   asChild = false,
   ...props
 }: React.ComponentProps<"div"> & {
-  asChild?: boolean
+  asChild?: boolean;
 }) {
-  const Comp = asChild ? Slot : "div"
+  const Comp = asChild ? Slot : "div";
 
   return (
     <Comp
       className={cn(
         "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function ButtonGroupSeparator({
@@ -68,16 +68,11 @@ function ButtonGroupSeparator({
       orientation={orientation}
       className={cn(
         "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export {
-  ButtonGroup,
-  ButtonGroupSeparator,
-  ButtonGroupText,
-  buttonGroupVariants,
-}
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
diff --git a/apps/web/components/ui/button.tsx b/apps/web/components/ui/button.tsx
index 5396628..2c4b21e 100644
--- a/apps/web/components/ui/button.tsx
+++ b/apps/web/components/ui/button.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
@@ -12,12 +12,9 @@ const buttonVariants = cva(
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
           "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
@@ -33,8 +30,8 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 function Button({
   className,
@@ -44,9 +41,9 @@ function Button({
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
+    asChild?: boolean;
   }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : "button";
 
   return (
     <Comp
@@ -56,7 +53,7 @@ function Button({
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  )
+  );
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/apps/web/components/ui/calendar.tsx b/apps/web/components/ui/calendar.tsx
index 4b5fec4..c56971a 100644
--- a/apps/web/components/ui/calendar.tsx
+++ b/apps/web/components/ui/calendar.tsx
@@ -1,19 +1,11 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react"
-import {
-  DayPicker,
-  getDefaultClassNames,
-  type DayButton,
-} from "react-day-picker"
+import * as React from "react";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { DayPicker, getDefaultClassNames, type DayButton } from "react-day-picker";
 
-import { cn } from "~/lib/utils"
-import { Button, buttonVariants } from "~/components/ui/button"
+import { cn } from "~/lib/utils";
+import { Button, buttonVariants } from "~/components/ui/button";
 
 function Calendar({
   className,
@@ -25,9 +17,9 @@ function Calendar({
   components,
   ...props
 }: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }) {
-  const defaultClassNames = getDefaultClassNames()
+  const defaultClassNames = getDefaultClassNames();
 
   return (
     <DayPicker
@@ -36,131 +28,99 @@ function Calendar({
         "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[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
+        className,
       )}
       captionLayout={captionLayout}
       formatters={{
-        formatMonthDropdown: (date) =>
-          date.toLocaleString("default", { month: "short" }),
+        formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
         ...formatters,
       }}
       classNames={{
         root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "flex gap-4 flex-col md:flex-row relative",
-          defaultClassNames.months
-        ),
+        months: cn("flex gap-4 flex-col md:flex-row relative", defaultClassNames.months),
         month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
         nav: cn(
           "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
-          defaultClassNames.nav
+          defaultClassNames.nav,
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
           "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_previous
+          defaultClassNames.button_previous,
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
           "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_next
+          defaultClassNames.button_next,
         ),
         month_caption: cn(
           "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
-          defaultClassNames.month_caption
+          defaultClassNames.month_caption,
         ),
         dropdowns: cn(
           "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
-          defaultClassNames.dropdowns
+          defaultClassNames.dropdowns,
         ),
         dropdown_root: cn(
           "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
-          defaultClassNames.dropdown_root
-        ),
-        dropdown: cn(
-          "absolute bg-popover inset-0 opacity-0",
-          defaultClassNames.dropdown
+          defaultClassNames.dropdown_root,
         ),
+        dropdown: cn("absolute bg-popover inset-0 opacity-0", defaultClassNames.dropdown),
         caption_label: cn(
           "select-none font-medium",
           captionLayout === "label"
             ? "text-sm"
             : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
-          defaultClassNames.caption_label
+          defaultClassNames.caption_label,
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
           "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
-          defaultClassNames.weekday
+          defaultClassNames.weekday,
         ),
         week: cn("flex w-full mt-2", defaultClassNames.week),
-        week_number_header: cn(
-          "select-none w-(--cell-size)",
-          defaultClassNames.week_number_header
-        ),
+        week_number_header: cn("select-none w-(--cell-size)", defaultClassNames.week_number_header),
         week_number: cn(
           "text-[0.8rem] select-none text-muted-foreground",
-          defaultClassNames.week_number
+          defaultClassNames.week_number,
         ),
         day: cn(
           "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
           props.showWeekNumber
             ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
             : "[&:first-child[data-selected=true]_button]:rounded-l-md",
-          defaultClassNames.day
-        ),
-        range_start: cn(
-          "rounded-l-md bg-accent",
-          defaultClassNames.range_start
+          defaultClassNames.day,
         ),
+        range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
         today: cn(
           "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-          defaultClassNames.today
+          defaultClassNames.today,
         ),
         outside: cn(
           "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
-        ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
+          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}
-            />
-          )
+          return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />;
         },
         Chevron: ({ className, orientation, ...props }) => {
           if (orientation === "left") {
-            return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
+            return <ChevronLeftIcon className={cn("size-4", className)} {...props} />;
           }
 
           if (orientation === "right") {
-            return (
-              <ChevronRightIcon
-                className={cn("size-4", className)}
-                {...props}
-              />
-            )
+            return <ChevronRightIcon className={cn("size-4", className)} {...props} />;
           }
 
-          return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
+          return <ChevronDownIcon className={cn("size-4", className)} {...props} />;
         },
         DayButton: CalendarDayButton,
         WeekNumber: ({ children, ...props }) => {
@@ -170,13 +130,13 @@ function Calendar({
                 {children}
               </div>
             </td>
-          )
+          );
         },
         ...components,
       }}
       {...props}
     />
-  )
+  );
 }
 
 function CalendarDayButton({
@@ -185,12 +145,12 @@ function CalendarDayButton({
   modifiers,
   ...props
 }: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
+  const defaultClassNames = getDefaultClassNames();
 
-  const ref = React.useRef<HTMLButtonElement>(null)
+  const ref = React.useRef<HTMLButtonElement>(null);
   React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
 
   return (
     <Button
@@ -210,11 +170,11 @@ function CalendarDayButton({
       className={cn(
         "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Calendar, CalendarDayButton }
+export { Calendar, CalendarDayButton };
diff --git a/apps/web/components/ui/card.tsx b/apps/web/components/ui/card.tsx
index bac41d2..86efca5 100644
--- a/apps/web/components/ui/card.tsx
+++ b/apps/web/components/ui/card.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -8,11 +8,11 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="card"
       className={cn(
         "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -21,11 +21,11 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="card-header"
       className={cn(
         "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -35,7 +35,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("leading-none font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
@@ -45,30 +45,21 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("text-muted-foreground text-sm", 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
-      )}
+      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", className)}
-      {...props}
-    />
-  )
+  return <div data-slot="card-content" className={cn("px-6", className)} {...props} />;
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -78,15 +69,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
       {...props}
     />
-  )
+  );
 }
 
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
diff --git a/apps/web/components/ui/carousel.tsx b/apps/web/components/ui/carousel.tsx
index a1d96b0..cb6a7d2 100644
--- a/apps/web/components/ui/carousel.tsx
+++ b/apps/web/components/ui/carousel.tsx
@@ -1,45 +1,43 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
 
-import { cn } from "~/lib/utils"
-import { Button } from "~/components/ui/button"
+import { cn } from "~/lib/utils";
+import { Button } from "~/components/ui/button";
 
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
+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
-}
+  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
+  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)
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 
 function useCarousel() {
-  const context = React.useContext(CarouselContext)
+  const context = React.useContext(CarouselContext);
 
   if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
+    throw new Error("useCarousel must be used within a <Carousel />");
   }
 
-  return context
+  return context;
 }
 
 function Carousel({
@@ -56,53 +54,53 @@ function Carousel({
       ...opts,
       axis: orientation === "horizontal" ? "x" : "y",
     },
-    plugins
-  )
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-  const [canScrollNext, setCanScrollNext] = React.useState(false)
+    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())
-  }, [])
+    if (!api) return;
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, []);
 
   const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev()
-  }, [api])
+    api?.scrollPrev();
+  }, [api]);
 
   const scrollNext = React.useCallback(() => {
-    api?.scrollNext()
-  }, [api])
+    api?.scrollNext();
+  }, [api]);
 
   const handleKeyDown = React.useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
       if (event.key === "ArrowLeft") {
-        event.preventDefault()
-        scrollPrev()
+        event.preventDefault();
+        scrollPrev();
       } else if (event.key === "ArrowRight") {
-        event.preventDefault()
-        scrollNext()
+        event.preventDefault();
+        scrollNext();
       }
     },
-    [scrollPrev, scrollNext]
-  )
+    [scrollPrev, scrollNext],
+  );
 
   React.useEffect(() => {
-    if (!api || !setApi) return
-    setApi(api)
-  }, [api, setApi])
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
 
   React.useEffect(() => {
-    if (!api) return
-    onSelect(api)
-    api.on("reInit", onSelect)
-    api.on("select", onSelect)
+    if (!api) return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
 
     return () => {
-      api?.off("select", onSelect)
-    }
-  }, [api, onSelect])
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
 
   return (
     <CarouselContext.Provider
@@ -110,8 +108,7 @@ function Carousel({
         carouselRef,
         api: api,
         opts,
-        orientation:
-          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
         scrollPrev,
         scrollNext,
         canScrollPrev,
@@ -129,32 +126,24 @@ function Carousel({
         {children}
       </div>
     </CarouselContext.Provider>
-  )
+  );
 }
 
 function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
-  const { carouselRef, orientation } = useCarousel()
+  const { carouselRef, orientation } = useCarousel();
 
   return (
-    <div
-      ref={carouselRef}
-      className="overflow-hidden"
-      data-slot="carousel-content"
-    >
+    <div ref={carouselRef} className="overflow-hidden" data-slot="carousel-content">
       <div
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
+        className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
         {...props}
       />
     </div>
-  )
+  );
 }
 
 function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
-  const { orientation } = useCarousel()
+  const { orientation } = useCarousel();
 
   return (
     <div
@@ -164,11 +153,11 @@ function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
       className={cn(
         "min-w-0 shrink-0 grow-0 basis-full",
         orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CarouselPrevious({
@@ -177,7 +166,7 @@ function CarouselPrevious({
   size = "icon",
   ...props
 }: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
   return (
     <Button
@@ -189,7 +178,7 @@ function CarouselPrevious({
         orientation === "horizontal"
           ? "top-1/2 -left-12 -translate-y-1/2"
           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
+        className,
       )}
       disabled={!canScrollPrev}
       onClick={scrollPrev}
@@ -198,7 +187,7 @@ function CarouselPrevious({
       <ArrowLeft />
       <span className="sr-only">Previous slide</span>
     </Button>
-  )
+  );
 }
 
 function CarouselNext({
@@ -207,7 +196,7 @@ function CarouselNext({
   size = "icon",
   ...props
 }: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
 
   return (
     <Button
@@ -219,7 +208,7 @@ function CarouselNext({
         orientation === "horizontal"
           ? "top-1/2 -right-12 -translate-y-1/2"
           : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
+        className,
       )}
       disabled={!canScrollNext}
       onClick={scrollNext}
@@ -228,7 +217,7 @@ function CarouselNext({
       <ArrowRight />
       <span className="sr-only">Next slide</span>
     </Button>
-  )
+  );
 }
 
 export {
@@ -238,4 +227,4 @@ export {
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
-}
+};
diff --git a/apps/web/components/ui/chart.tsx b/apps/web/components/ui/chart.tsx
index 6a9587d..6fe13a6 100644
--- a/apps/web/components/ui/chart.tsx
+++ b/apps/web/components/ui/chart.tsx
@@ -1,37 +1,37 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "" } as const
+const THEMES = { light: "" } as const;
 
 export type ChartConfig = {
   [k in string]: {
-    label?: React.ReactNode
-    icon?: React.ComponentType
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
   } & (
     | { color?: string; theme?: never }
     | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
-}
+  );
+};
 
 type ChartContextProps = {
-  config: ChartConfig
-}
+  config: ChartConfig;
+};
 
-const ChartContext = React.createContext<ChartContextProps | null>(null)
+const ChartContext = React.createContext<ChartContextProps | null>(null);
 
 function useChart() {
-  const context = React.useContext(ChartContext)
+  const context = React.useContext(ChartContext);
 
   if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
+    throw new Error("useChart must be used within a <ChartContainer />");
   }
 
-  return context
+  return context;
 }
 
 function ChartContainer({
@@ -41,13 +41,11 @@ function ChartContainer({
   config,
   ...props
 }: React.ComponentProps<"div"> & {
-  config: ChartConfig
-  children: React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"]
+  config: ChartConfig;
+  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
 }) {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
 
   return (
     <ChartContext.Provider value={{ config }}>
@@ -56,26 +54,22 @@ function ChartContainer({
         data-chart={chartId}
         className={cn(
           "[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className
+          className,
         )}
         {...props}
       >
         <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
+        <RechartsPrimitive.ResponsiveContainer>{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
-  )
+  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
 
   if (!colorConfig.length) {
-    return null
+    return null;
   }
 
   return (
@@ -87,22 +81,20 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
 ${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
+    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
+const ChartTooltip = RechartsPrimitive.Tooltip;
 
 function ChartTooltipContent({
   active,
@@ -120,61 +112,51 @@ function ChartTooltipContent({
   labelKey,
 }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
   React.ComponentProps<"div"> & {
-    hideLabel?: boolean
-    hideIndicator?: boolean
-    indicator?: "line" | "dot" | "dashed"
-    nameKey?: string
-    labelKey?: string
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
   }) {
-  const { config } = useChart()
+  const { config } = useChart();
 
   const tooltipLabel = React.useMemo(() => {
     if (hideLabel || !payload?.length) {
-      return null
+      return null;
     }
 
-    const [item] = payload
-    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
-    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    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 as keyof typeof config]?.label || label
-        : itemConfig?.label
+        : itemConfig?.label;
 
     if (labelFormatter) {
       return (
-        <div className={cn("font-medium", labelClassName)}>
-          {labelFormatter(value, payload)}
-        </div>
-      )
+        <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>
+      );
     }
 
     if (!value) {
-      return null
+      return null;
     }
 
-    return <div className={cn("font-medium", labelClassName)}>{value}</div>
-  }, [
-    label,
-    labelFormatter,
-    payload,
-    hideLabel,
-    labelClassName,
-    config,
-    labelKey,
-  ])
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
 
   if (!active || !payload?.length) {
-    return null
+    return null;
   }
 
-  const nestLabel = payload.length === 1 && indicator !== "dot"
+  const nestLabel = payload.length === 1 && indicator !== "dot";
 
   return (
     <div
       className={cn(
         "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
-        className
+        className,
       )}
     >
       {!nestLabel ? tooltipLabel : null}
@@ -182,16 +164,16 @@ function ChartTooltipContent({
         {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
+            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={item.dataKey}
                 className={cn(
                   "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
-                  indicator === "dot" && "items-center"
+                  indicator === "dot" && "items-center",
                 )}
               >
                 {formatter && item?.value !== undefined && item.name ? (
@@ -211,7 +193,7 @@ function ChartTooltipContent({
                               "w-0 border-[1.5px] border-dashed bg-transparent":
                                 indicator === "dashed",
                               "my-0.5": nestLabel && indicator === "dashed",
-                            }
+                            },
                           )}
                           style={
                             {
@@ -225,7 +207,7 @@ function ChartTooltipContent({
                     <div
                       className={cn(
                         "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
+                        nestLabel ? "items-end" : "items-center",
                       )}
                     >
                       <div className="grid gap-1.5">
@@ -243,14 +225,14 @@ function ChartTooltipContent({
                   </>
                 )}
               </div>
-            )
+            );
           })}
       </div>
     </div>
-  )
+  );
 }
 
-const ChartLegend = RechartsPrimitive.Legend
+const ChartLegend = RechartsPrimitive.Legend;
 
 function ChartLegendContent({
   className,
@@ -260,13 +242,13 @@ function ChartLegendContent({
   nameKey,
 }: React.ComponentProps<"div"> &
   Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-    hideIcon?: boolean
-    nameKey?: string
+    hideIcon?: boolean;
+    nameKey?: string;
   }) {
-  const { config } = useChart()
+  const { config } = useChart();
 
   if (!payload?.length) {
-    return null
+    return null;
   }
 
   return (
@@ -274,20 +256,20 @@ function ChartLegendContent({
       className={cn(
         "flex items-center justify-center gap-4",
         verticalAlign === "top" ? "pb-3" : "pt-3",
-        className
+        className,
       )}
     >
       {payload
         .filter((item) => item.type !== "none")
         .map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
           return (
             <div
               key={item.value}
               className={cn(
-                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
               )}
             >
               {itemConfig?.icon && !hideIcon ? (
@@ -302,49 +284,36 @@ function ChartLegendContent({
               )}
               {itemConfig?.label}
             </div>
-          )
+          );
         })}
     </div>
-  )
+  );
 }
 
 // Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string
-) {
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
   if (typeof payload !== "object" || payload === null) {
-    return undefined
+    return undefined;
   }
 
   const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
+    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
       ? payload.payload
-      : undefined
+      : undefined;
 
-  let configLabelKey: string = key
+  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
+  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
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
   }
 
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config]
+  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
 }
 
 export {
@@ -354,4 +323,4 @@ export {
   ChartLegend,
   ChartLegendContent,
   ChartStyle,
-}
+};
diff --git a/apps/web/components/ui/checkbox.tsx b/apps/web/components/ui/checkbox.tsx
index 1dc87d7..cc30980 100644
--- a/apps/web/components/ui/checkbox.tsx
+++ b/apps/web/components/ui/checkbox.tsx
@@ -1,21 +1,18 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "lucide-react"
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
-function Checkbox({
-  className,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
   return (
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
         "peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     >
@@ -26,7 +23,7 @@ function Checkbox({
         <CheckIcon className="size-3.5" />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-  )
+  );
 }
 
-export { Checkbox }
+export { Checkbox };
diff --git a/apps/web/components/ui/collapsible.tsx b/apps/web/components/ui/collapsible.tsx
index ae9fad0..e77b9a8 100644
--- a/apps/web/components/ui/collapsible.tsx
+++ b/apps/web/components/ui/collapsible.tsx
@@ -1,33 +1,21 @@
-"use client"
+"use client";
 
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 
-function Collapsible({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+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}
-    />
-  )
+  return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />;
 }
 
 function CollapsibleContent({
   ...props
 }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleContent
-      data-slot="collapsible-content"
-      {...props}
-    />
-  )
+  return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />;
 }
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/apps/web/components/ui/command.tsx b/apps/web/components/ui/command.tsx
index 39840d6..ff97da1 100644
--- a/apps/web/components/ui/command.tsx
+++ b/apps/web/components/ui/command.tsx
@@ -1,32 +1,29 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from "lucide-react"
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from "~/components/ui/dialog"
+} from "~/components/ui/dialog";
 
-function Command({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
   return (
     <CommandPrimitive
       data-slot="command"
       className={cn(
         "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CommandDialog({
@@ -37,10 +34,10 @@ function CommandDialog({
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof Dialog> & {
-  title?: string
-  description?: string
-  className?: string
-  showCloseButton?: boolean
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
 }) {
   return (
     <Dialog {...props}>
@@ -57,7 +54,7 @@ function CommandDialog({
         </Command>
       </DialogContent>
     </Dialog>
-  )
+  );
 }
 
 function CommandInput({
@@ -65,49 +62,38 @@ function CommandInput({
   ...props
 }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
-    <div
-      data-slot="command-input-wrapper"
-      className="flex h-9 items-center gap-2 border-b px-3"
-    >
+    <div data-slot="command-input-wrapper" className="flex h-9 items-center gap-2 border-b px-3">
       <SearchIcon className="size-4 shrink-0 opacity-50" />
       <CommandPrimitive.Input
         data-slot="command-input"
         className={cn(
           "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          className,
         )}
         {...props}
       />
     </div>
-  )
+  );
 }
 
-function CommandList({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
   return (
     <CommandPrimitive.List
       data-slot="command-list"
-      className={cn(
-        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        className
-      )}
+      className={cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
       {...props}
     />
-  )
+  );
 }
 
-function CommandEmpty({
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
   return (
     <CommandPrimitive.Empty
       data-slot="command-empty"
       className="py-6 text-center text-sm"
       {...props}
     />
-  )
+  );
 }
 
 function CommandGroup({
@@ -119,11 +105,11 @@ function CommandGroup({
       data-slot="command-group"
       className={cn(
         "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CommandSeparator({
@@ -136,39 +122,30 @@ function CommandSeparator({
       className={cn("bg-border -mx-1 h-px", className)}
       {...props}
     />
-  )
+  );
 }
 
-function CommandItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
   return (
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
         "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function CommandShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="command-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
+      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -181,4 +158,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-}
+};
diff --git a/apps/web/components/ui/context-menu.tsx b/apps/web/components/ui/context-menu.tsx
index b2e8dec..52e1efe 100644
--- a/apps/web/components/ui/context-menu.tsx
+++ b/apps/web/components/ui/context-menu.tsx
@@ -1,56 +1,37 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
-function ContextMenu({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
-  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
 }
 
 function ContextMenuTrigger({
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
-  return (
-    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
-  )
+  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />;
 }
 
-function ContextMenuGroup({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
-  return (
-    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...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 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 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}
-    />
-  )
+  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;
 }
 
 function ContextMenuSubTrigger({
@@ -59,7 +40,7 @@ function ContextMenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <ContextMenuPrimitive.SubTrigger
@@ -67,14 +48,14 @@ function ContextMenuSubTrigger({
       data-inset={inset}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
       {children}
       <ChevronRightIcon className="ml-auto" />
     </ContextMenuPrimitive.SubTrigger>
-  )
+  );
 }
 
 function ContextMenuSubContent({
@@ -86,11 +67,11 @@ function ContextMenuSubContent({
       data-slot="context-menu-sub-content"
       className={cn(
         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function ContextMenuContent({
@@ -103,12 +84,12 @@ function ContextMenuContent({
         data-slot="context-menu-content"
         className={cn(
           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
+          className,
         )}
         {...props}
       />
     </ContextMenuPrimitive.Portal>
-  )
+  );
 }
 
 function ContextMenuItem({
@@ -117,8 +98,8 @@ function ContextMenuItem({
   variant = "default",
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
+  inset?: boolean;
+  variant?: "default" | "destructive";
 }) {
   return (
     <ContextMenuPrimitive.Item
@@ -127,11 +108,11 @@ function ContextMenuItem({
       data-variant={variant}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function ContextMenuCheckboxItem({
@@ -145,7 +126,7 @@ function ContextMenuCheckboxItem({
       data-slot="context-menu-checkbox-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       checked={checked}
       {...props}
@@ -157,7 +138,7 @@ function ContextMenuCheckboxItem({
       </span>
       {children}
     </ContextMenuPrimitive.CheckboxItem>
-  )
+  );
 }
 
 function ContextMenuRadioItem({
@@ -170,7 +151,7 @@ function ContextMenuRadioItem({
       data-slot="context-menu-radio-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
@@ -181,7 +162,7 @@ function ContextMenuRadioItem({
       </span>
       {children}
     </ContextMenuPrimitive.RadioItem>
-  )
+  );
 }
 
 function ContextMenuLabel({
@@ -189,19 +170,16 @@ function ContextMenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <ContextMenuPrimitive.Label
       data-slot="context-menu-label"
       data-inset={inset}
-      className={cn(
-        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
+      className={cn("text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
       {...props}
     />
-  )
+  );
 }
 
 function ContextMenuSeparator({
@@ -214,23 +192,17 @@ function ContextMenuSeparator({
       className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
     />
-  )
+  );
 }
 
-function ContextMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="context-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
+      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -249,4 +221,4 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuRadioGroup,
-}
+};
diff --git a/apps/web/components/ui/dialog.tsx b/apps/web/components/ui/dialog.tsx
index d6062a8..b7579fd 100644
--- a/apps/web/components/ui/dialog.tsx
+++ b/apps/web/components/ui/dialog.tsx
@@ -1,33 +1,25 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+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 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 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 DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 function DialogOverlay({
@@ -39,11 +31,11 @@ function DialogOverlay({
       data-slot="dialog-overlay"
       className={cn(
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogContent({
@@ -52,7 +44,7 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
+  showCloseButton?: boolean;
 }) {
   return (
     <DialogPortal data-slot="dialog-portal">
@@ -61,7 +53,7 @@ function DialogContent({
         data-slot="dialog-content"
         className={cn(
           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
-          className
+          className,
         )}
         {...props}
       >
@@ -77,7 +69,7 @@ function DialogContent({
         )}
       </DialogPrimitive.Content>
     </DialogPortal>
-  )
+  );
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -87,33 +79,27 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
       {...props}
     />
-  )
+  );
 }
 
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
       className={cn("text-lg leading-none font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DialogDescription({
@@ -126,7 +112,7 @@ function DialogDescription({
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -140,4 +126,4 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-}
+};
diff --git a/apps/web/components/ui/drawer.tsx b/apps/web/components/ui/drawer.tsx
index 8ca265e..d61e9a5 100644
--- a/apps/web/components/ui/drawer.tsx
+++ b/apps/web/components/ui/drawer.tsx
@@ -1,32 +1,24 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
-function Drawer({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+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 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 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 DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
 }
 
 function DrawerOverlay({
@@ -38,11 +30,11 @@ function DrawerOverlay({
       data-slot="drawer-overlay"
       className={cn(
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DrawerContent({
@@ -61,7 +53,7 @@ function DrawerContent({
           "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-lg data-[vaul-drawer-direction=bottom]:border-t",
           "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
           "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
-          className
+          className,
         )}
         {...props}
       >
@@ -69,7 +61,7 @@ function DrawerContent({
         {children}
       </DrawerPrimitive.Content>
     </DrawerPortal>
-  )
+  );
 }
 
 function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -78,11 +70,11 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"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-left",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -92,20 +84,17 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("mt-auto flex flex-col gap-2 p-4", className)}
       {...props}
     />
-  )
+  );
 }
 
-function DrawerTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
       className={cn("text-foreground font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DrawerDescription({
@@ -118,7 +107,7 @@ function DrawerDescription({
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -132,4 +121,4 @@ export {
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
-}
+};
diff --git a/apps/web/components/ui/dropdown-menu.tsx b/apps/web/components/ui/dropdown-menu.tsx
index dfd30be..6f75149 100644
--- a/apps/web/components/ui/dropdown-menu.tsx
+++ b/apps/web/components/ui/dropdown-menu.tsx
@@ -1,34 +1,25 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
-function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+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} />
-  )
+  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}
-    />
-  )
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
 }
 
 function DropdownMenuContent({
@@ -43,20 +34,16 @@ function DropdownMenuContent({
         sideOffset={sideOffset}
         className={cn(
           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
+          className,
         )}
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
-  )
+  );
 }
 
-function DropdownMenuGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
+function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
 }
 
 function DropdownMenuItem({
@@ -65,8 +52,8 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
+  inset?: boolean;
+  variant?: "default" | "destructive";
 }) {
   return (
     <DropdownMenuPrimitive.Item
@@ -75,11 +62,11 @@ function DropdownMenuItem({
       data-variant={variant}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuCheckboxItem({
@@ -93,7 +80,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       checked={checked}
       {...props}
@@ -105,18 +92,13 @@ function DropdownMenuCheckboxItem({
       </span>
       {children}
     </DropdownMenuPrimitive.CheckboxItem>
-  )
+  );
 }
 
 function DropdownMenuRadioGroup({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
+  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
 }
 
 function DropdownMenuRadioItem({
@@ -129,7 +111,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
@@ -140,7 +122,7 @@ function DropdownMenuRadioItem({
       </span>
       {children}
     </DropdownMenuPrimitive.RadioItem>
-  )
+  );
 }
 
 function DropdownMenuLabel({
@@ -148,19 +130,16 @@ function DropdownMenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.Label
       data-slot="dropdown-menu-label"
       data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
+      className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuSeparator({
@@ -173,29 +152,21 @@ function DropdownMenuSeparator({
       className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
     />
-  )
+  );
 }
 
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
+      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
       {...props}
     />
-  )
+  );
 }
 
-function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }
 
 function DropdownMenuSubTrigger({
@@ -204,7 +175,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.SubTrigger
@@ -212,14 +183,14 @@ function DropdownMenuSubTrigger({
       data-inset={inset}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
       {children}
       <ChevronRightIcon className="ml-auto size-4" />
     </DropdownMenuPrimitive.SubTrigger>
-  )
+  );
 }
 
 function DropdownMenuSubContent({
@@ -231,11 +202,11 @@ function DropdownMenuSubContent({
       data-slot="dropdown-menu-sub-content"
       className={cn(
         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -254,4 +225,4 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
-}
+};
diff --git a/apps/web/components/ui/empty.tsx b/apps/web/components/ui/empty.tsx
index d8d3094..328647d 100644
--- a/apps/web/components/ui/empty.tsx
+++ b/apps/web/components/ui/empty.tsx
@@ -1,6 +1,6 @@
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function Empty({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -8,24 +8,21 @@ function Empty({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="empty"
       className={cn(
         "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
-        className
+        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 text-center",
-        className
-      )}
+      className={cn("flex max-w-sm flex-col items-center gap-2 text-center", className)}
       {...props}
     />
-  )
+  );
 }
 
 const emptyMediaVariants = cva(
@@ -40,8 +37,8 @@ const emptyMediaVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 function EmptyMedia({
   className,
@@ -55,7 +52,7 @@ function EmptyMedia({
       className={cn(emptyMediaVariants({ variant, className }))}
       {...props}
     />
-  )
+  );
 }
 
 function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -65,7 +62,7 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("text-lg font-medium tracking-tight", className)}
       {...props}
     />
-  )
+  );
 }
 
 function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
@@ -74,11 +71,11 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
       data-slot="empty-description"
       className={cn(
         "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
@@ -87,18 +84,11 @@ function EmptyContent({ className, ...props }: React.ComponentProps<"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
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export {
-  Empty,
-  EmptyHeader,
-  EmptyTitle,
-  EmptyDescription,
-  EmptyContent,
-  EmptyMedia,
-}
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };
diff --git a/apps/web/components/ui/field.tsx b/apps/web/components/ui/field.tsx
index 5851cd3..15d8ec9 100644
--- a/apps/web/components/ui/field.tsx
+++ b/apps/web/components/ui/field.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import { useMemo } from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import { useMemo } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "~/lib/utils"
-import { Label } from "~/components/ui/label"
-import { Separator } from "~/components/ui/separator"
+import { cn } from "~/lib/utils";
+import { Label } from "~/components/ui/label";
+import { Separator } from "~/components/ui/separator";
 
 function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
   return (
@@ -14,11 +14,11 @@ function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
       className={cn(
         "flex flex-col gap-6",
         "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldLegend({
@@ -34,11 +34,11 @@ function FieldLegend({
         "mb-3 font-medium",
         "data-[variant=legend]:text-base",
         "data-[variant=label]:text-sm",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
@@ -47,36 +47,33 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"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
+        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",
-          "[&>[data-slot=field-label]]:flex-auto",
-          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-        ],
-        responsive: [
-          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
-          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
-          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-        ],
-      },
+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",
+        "[&>[data-slot=field-label]]:flex-auto",
+        "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      ],
+      responsive: [
+        "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+        "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+        "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      ],
     },
-    defaultVariants: {
-      orientation: "vertical",
-    },
-  }
-)
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+});
 
 function Field({
   className,
@@ -91,26 +88,20 @@ function Field({
       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.5 leading-snug",
-        className
-      )}
+      className={cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className)}
       {...props}
     />
-  )
+  );
 }
 
-function FieldLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof Label>) {
+function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
   return (
     <Label
       data-slot="field-label"
@@ -118,11 +109,11 @@ function FieldLabel({
         "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
         "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary=checked]:bg-primary/10",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -131,11 +122,11 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"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
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
@@ -146,11 +137,11 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
         "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
         "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldSeparator({
@@ -158,7 +149,7 @@ function FieldSeparator({
   className,
   ...props
 }: React.ComponentProps<"div"> & {
-  children?: React.ReactNode
+  children?: React.ReactNode;
 }) {
   return (
     <div
@@ -166,7 +157,7 @@ function FieldSeparator({
       data-content={!!children}
       className={cn(
         "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-        className
+        className,
       )}
       {...props}
     >
@@ -180,7 +171,7 @@ function FieldSeparator({
         </span>
       )}
     </div>
-  )
+  );
 }
 
 function FieldError({
@@ -189,37 +180,32 @@ function FieldError({
   errors,
   ...props
 }: React.ComponentProps<"div"> & {
-  errors?: Array<{ message?: string } | undefined>
+  errors?: Array<{ message?: string } | undefined>;
 }) {
   const content = useMemo(() => {
     if (children) {
-      return children
+      return children;
     }
 
     if (!errors?.length) {
-      return null
+      return null;
     }
 
-    const uniqueErrors = [
-      ...new Map(errors.map((error) => [error?.message, error])).values(),
-    ]
+    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
 
     if (uniqueErrors?.length == 1) {
-      return uniqueErrors[0]?.message
+      return uniqueErrors[0]?.message;
     }
 
     return (
       <ul className="ml-4 flex list-disc flex-col gap-1">
-        {uniqueErrors.map(
-          (error, index) =>
-            error?.message && <li key={index}>{error.message}</li>
-        )}
+        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
       </ul>
-    )
-  }, [children, errors])
+    );
+  }, [children, errors]);
 
   if (!content) {
-    return null
+    return null;
   }
 
   return (
@@ -231,7 +217,7 @@ function FieldError({
     >
       {content}
     </div>
-  )
+  );
 }
 
 export {
@@ -245,4 +231,4 @@ export {
   FieldSet,
   FieldContent,
   FieldTitle,
-}
+};
diff --git a/apps/web/components/ui/form.tsx b/apps/web/components/ui/form.tsx
index 62952fc..cd8383d 100644
--- a/apps/web/components/ui/form.tsx
+++ b/apps/web/components/ui/form.tsx
@@ -1,8 +1,8 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import type * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
+import type * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
 import {
   Controller,
   FormProvider,
@@ -11,23 +11,21 @@ import {
   type ControllerProps,
   type FieldPath,
   type FieldValues,
-} from "react-hook-form"
+} from "react-hook-form";
 
-import { cn } from "~/lib/utils"
-import { Label } from "~/components/ui/label"
+import { cn } from "~/lib/utils";
+import { Label } from "~/components/ui/label";
 
-const Form = FormProvider
+const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
-}
+  name: TName;
+};
 
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
@@ -39,21 +37,21 @@ const FormField = <
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
     </FormFieldContext.Provider>
-  )
-}
+  );
+};
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState } = useFormContext()
-  const formState = useFormState({ name: fieldContext.name })
-  const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
 
   if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+    throw new Error("useFormField should be used within <FormField>");
   }
 
-  const { id } = itemContext
+  const { id } = itemContext;
 
   return {
     id,
@@ -62,36 +60,27 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  }
-}
+  };
+};
 
 type FormItemContextValue = {
-  id: string
-}
+  id: string;
+};
 
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
 
 function FormItem({ className, ...props }: React.ComponentProps<"div">) {
-  const id = React.useId()
+  const id = React.useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div
-        data-slot="form-item"
-        className={cn("grid gap-2", className)}
-        {...props}
-      />
+      <div data-slot="form-item" className={cn("grid gap-2", className)} {...props} />
     </FormItemContext.Provider>
-  )
+  );
 }
 
-function FormLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField()
+function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField();
 
   return (
     <Label
@@ -101,29 +90,25 @@ function FormLabel({
       htmlFor={formItemId}
       {...props}
     />
-  )
+  );
 }
 
 function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 
   return (
     <Slot
       data-slot="form-control"
       id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
       aria-invalid={!!error}
       {...props}
     />
-  )
+  );
 }
 
 function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
-  const { formDescriptionId } = useFormField()
+  const { formDescriptionId } = useFormField();
 
   return (
     <p
@@ -132,15 +117,15 @@ function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? "") : props.children
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;
 
   if (!body) {
-    return null
+    return null;
   }
 
   return (
@@ -152,7 +137,7 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
     >
       {body}
     </p>
-  )
+  );
 }
 
 export {
@@ -164,4 +149,4 @@ export {
   FormDescription,
   FormMessage,
   FormField,
-}
+};
diff --git a/apps/web/components/ui/hover-card.tsx b/apps/web/components/ui/hover-card.tsx
index 01febed..eed472c 100644
--- a/apps/web/components/ui/hover-card.tsx
+++ b/apps/web/components/ui/hover-card.tsx
@@ -1,22 +1,16 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
-function HoverCard({
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+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 HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
 }
 
 function HoverCardContent({
@@ -33,12 +27,12 @@ function HoverCardContent({
         sideOffset={sideOffset}
         className={cn(
           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className
+          className,
         )}
         {...props}
       />
     </HoverCardPrimitive.Portal>
-  )
+  );
 }
 
-export { HoverCard, HoverCardTrigger, HoverCardContent }
+export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/apps/web/components/ui/input-group.tsx b/apps/web/components/ui/input-group.tsx
index 60802b2..d082471 100644
--- a/apps/web/components/ui/input-group.tsx
+++ b/apps/web/components/ui/input-group.tsx
@@ -1,12 +1,12 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "~/lib/utils"
-import { Button } from "~/components/ui/button"
-import { Input } from "~/components/ui/input"
-import { Textarea } from "~/components/ui/textarea"
+import { cn } from "~/lib/utils";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Textarea } from "~/components/ui/textarea";
 
 function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -29,11 +29,11 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
         // Error state.
         "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive=true]]:ring-destructive/40",
 
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 const inputGroupAddonVariants = cva(
@@ -41,10 +41,8 @@ const inputGroupAddonVariants = cva(
   {
     variants: {
       align: {
-        "inline-start":
-          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
-        "inline-end":
-          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
         "block-start":
           "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
         "block-end":
@@ -54,8 +52,8 @@ const inputGroupAddonVariants = cva(
     defaultVariants: {
       align: "inline-start",
     },
-  }
-)
+  },
+);
 
 function InputGroupAddon({
   className,
@@ -70,32 +68,28 @@ function InputGroupAddon({
       className={cn(inputGroupAddonVariants({ align }), className)}
       onClick={(e) => {
         if ((e.target as HTMLElement).closest("button")) {
-          return
+          return;
         }
-        e.currentTarget.parentElement?.querySelector("input")?.focus()
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
       }}
       {...props}
     />
-  )
+  );
 }
 
-const inputGroupButtonVariants = cva(
-  "text-sm shadow-none flex gap-2 items-center",
-  {
-    variants: {
-      size: {
-        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
-        sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
-        "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",
+const inputGroupButtonVariants = cva("text-sm shadow-none flex gap-2 items-center", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+      sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+      "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,
@@ -113,7 +107,7 @@ function InputGroupButton({
       className={cn(inputGroupButtonVariants({ size }), className)}
       {...props}
     />
-  )
+  );
 }
 
 function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
@@ -121,43 +115,37 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
     <span
       className={cn(
         "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function InputGroupInput({
-  className,
-  ...props
-}: React.ComponentProps<"input">) {
+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 focus-visible:ring-0",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function InputGroupTextarea({
-  className,
-  ...props
-}: React.ComponentProps<"textarea">) {
+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-3 shadow-none focus-visible:ring-0",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -167,4 +155,4 @@ export {
   InputGroupText,
   InputGroupInput,
   InputGroupTextarea,
-}
+};
diff --git a/apps/web/components/ui/input-otp.tsx b/apps/web/components/ui/input-otp.tsx
index 4d78bce..8ce8686 100644
--- a/apps/web/components/ui/input-otp.tsx
+++ b/apps/web/components/ui/input-otp.tsx
@@ -1,39 +1,32 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
-import { MinusIcon } from "lucide-react"
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { MinusIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function InputOTP({
   className,
   containerClassName,
   ...props
 }: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string
+  containerClassName?: string;
 }) {
   return (
     <OTPInput
       data-slot="input-otp"
-      containerClassName={cn(
-        "flex items-center gap-2 has-disabled:opacity-50",
-        containerClassName
-      )}
+      containerClassName={cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName)}
       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", className)}
-      {...props}
-    />
-  )
+    <div data-slot="input-otp-group" className={cn("flex items-center", className)} {...props} />
+  );
 }
 
 function InputOTPSlot({
@@ -41,10 +34,10 @@ function InputOTPSlot({
   className,
   ...props
 }: React.ComponentProps<"div"> & {
-  index: number
+  index: number;
 }) {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
 
   return (
     <div
@@ -52,7 +45,7 @@ function InputOTPSlot({
       data-active={isActive}
       className={cn(
         "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
-        className
+        className,
       )}
       {...props}
     >
@@ -63,7 +56,7 @@ function InputOTPSlot({
         </div>
       )}
     </div>
-  )
+  );
 }
 
 function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
@@ -71,7 +64,7 @@ function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
     <div data-slot="input-otp-separator" role="separator" {...props}>
       <MinusIcon />
     </div>
-  )
+  );
 }
 
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
diff --git a/apps/web/components/ui/input.tsx b/apps/web/components/ui/input.tsx
index d97da1c..735ff43 100644
--- a/apps/web/components/ui/input.tsx
+++ b/apps/web/components/ui/input.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
@@ -11,11 +11,11 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 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 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Input }
+export { Input };
diff --git a/apps/web/components/ui/item.tsx b/apps/web/components/ui/item.tsx
index 5e50c3e..d8cb0ed 100644
--- a/apps/web/components/ui/item.tsx
+++ b/apps/web/components/ui/item.tsx
@@ -1,9 +1,9 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "~/lib/utils"
-import { Separator } from "~/components/ui/separator"
+import { cn } from "~/lib/utils";
+import { Separator } from "~/components/ui/separator";
 
 function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -13,13 +13,10 @@ function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("group/item-group flex flex-col", className)}
       {...props}
     />
-  )
+  );
 }
 
-function ItemSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
+function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
   return (
     <Separator
       data-slot="item-separator"
@@ -27,7 +24,7 @@ function ItemSeparator({
       className={cn("my-0", className)}
       {...props}
     />
-  )
+  );
 }
 
 const itemVariants = cva(
@@ -48,8 +45,8 @@ const itemVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 function Item({
   className,
@@ -57,9 +54,8 @@ function Item({
   size = "default",
   asChild = false,
   ...props
-}: React.ComponentProps<"div"> &
-  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "div"
+}: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div";
   return (
     <Comp
       data-slot="item"
@@ -68,7 +64,7 @@ function Item({
       className={cn(itemVariants({ variant, size, className }))}
       {...props}
     />
-  )
+  );
 }
 
 const itemMediaVariants = cva(
@@ -78,15 +74,14 @@ const itemMediaVariants = cva(
       variant: {
         default: "bg-transparent",
         icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
-        image:
-          "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
+        image: "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
       },
     },
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 function ItemMedia({
   className,
@@ -100,33 +95,27 @@ function ItemMedia({
       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 [&+[data-slot=item-content]]:flex-none",
-        className
-      )}
+      className={cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className)}
       {...props}
     />
-  )
+  );
 }
 
 function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="item-title"
-      className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
-        className
-      )}
+      className={cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium", className)}
       {...props}
     />
-  )
+  );
 }
 
 function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
@@ -136,47 +125,37 @@ function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
       className={cn(
         "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
-      data-slot="item-actions"
-      className={cn("flex items-center gap-2", className)}
-      {...props}
-    />
-  )
+    <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
-      )}
+      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
-      )}
+      className={cn("flex basis-full items-center justify-between gap-2", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -190,4 +169,4 @@ export {
   ItemDescription,
   ItemHeader,
   ItemFooter,
-}
+};
diff --git a/apps/web/components/ui/kbd.tsx b/apps/web/components/ui/kbd.tsx
index 8debd34..cae15c9 100644
--- a/apps/web/components/ui/kbd.tsx
+++ b/apps/web/components/ui/kbd.tsx
@@ -1,4 +1,4 @@
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
   return (
@@ -8,11 +8,11 @@ function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
         "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
         "[&_svg:not([class*='size-'])]:size-3",
         "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background=tooltip-content]_&]:bg-background/10",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
@@ -22,7 +22,7 @@ function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("inline-flex items-center gap-1", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Kbd, KbdGroup }
+export { Kbd, KbdGroup };
diff --git a/apps/web/components/ui/label.tsx b/apps/web/components/ui/label.tsx
index e15fb65..75818b7 100644
--- a/apps/web/components/ui/label.tsx
+++ b/apps/web/components/ui/label.tsx
@@ -1,24 +1,21 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+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
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Label }
+export { Label };
diff --git a/apps/web/components/ui/menubar.tsx b/apps/web/components/ui/menubar.tsx
index f4e4a94..ccb537f 100644
--- a/apps/web/components/ui/menubar.tsx
+++ b/apps/web/components/ui/menubar.tsx
@@ -1,51 +1,38 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
-function Menubar({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+function Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {
   return (
     <MenubarPrimitive.Root
       data-slot="menubar"
       className={cn(
         "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function MenubarMenu({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...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 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 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 MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />;
 }
 
 function MenubarTrigger({
@@ -57,11 +44,11 @@ function MenubarTrigger({
       data-slot="menubar-trigger"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function MenubarContent({
@@ -80,12 +67,12 @@ function MenubarContent({
         sideOffset={sideOffset}
         className={cn(
           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
-          className
+          className,
         )}
         {...props}
       />
     </MenubarPortal>
-  )
+  );
 }
 
 function MenubarItem({
@@ -94,8 +81,8 @@ function MenubarItem({
   variant = "default",
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
+  inset?: boolean;
+  variant?: "default" | "destructive";
 }) {
   return (
     <MenubarPrimitive.Item
@@ -104,11 +91,11 @@ function MenubarItem({
       data-variant={variant}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function MenubarCheckboxItem({
@@ -122,7 +109,7 @@ function MenubarCheckboxItem({
       data-slot="menubar-checkbox-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       checked={checked}
       {...props}
@@ -134,7 +121,7 @@ function MenubarCheckboxItem({
       </span>
       {children}
     </MenubarPrimitive.CheckboxItem>
-  )
+  );
 }
 
 function MenubarRadioItem({
@@ -147,7 +134,7 @@ function MenubarRadioItem({
       data-slot="menubar-radio-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
@@ -158,7 +145,7 @@ function MenubarRadioItem({
       </span>
       {children}
     </MenubarPrimitive.RadioItem>
-  )
+  );
 }
 
 function MenubarLabel({
@@ -166,19 +153,16 @@ function MenubarLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Label> & {
-  inset?: boolean
+  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]:pl-8",
-        className
-      )}
+      className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
       {...props}
     />
-  )
+  );
 }
 
 function MenubarSeparator({
@@ -191,29 +175,21 @@ function MenubarSeparator({
       className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
     />
-  )
+  );
 }
 
-function MenubarShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function MenubarShortcut({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="menubar-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
+      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
       {...props}
     />
-  )
+  );
 }
 
-function MenubarSub({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+function MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
 }
 
 function MenubarSubTrigger({
@@ -222,7 +198,7 @@ function MenubarSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <MenubarPrimitive.SubTrigger
@@ -230,14 +206,14 @@ function MenubarSubTrigger({
       data-inset={inset}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
-        className
+        className,
       )}
       {...props}
     >
       {children}
       <ChevronRightIcon className="ml-auto h-4 w-4" />
     </MenubarPrimitive.SubTrigger>
-  )
+  );
 }
 
 function MenubarSubContent({
@@ -249,11 +225,11 @@ function MenubarSubContent({
       data-slot="menubar-sub-content"
       className={cn(
         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -273,4 +249,4 @@ export {
   MenubarSub,
   MenubarSubTrigger,
   MenubarSubContent,
-}
+};
diff --git a/apps/web/components/ui/navigation-menu.tsx b/apps/web/components/ui/navigation-menu.tsx
index 606e02d..c1d5b40 100644
--- a/apps/web/components/ui/navigation-menu.tsx
+++ b/apps/web/components/ui/navigation-menu.tsx
@@ -1,9 +1,9 @@
-import * as React from "react"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { cva } from "class-variance-authority"
-import { ChevronDownIcon } from "lucide-react"
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDownIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function NavigationMenu({
   className,
@@ -11,7 +11,7 @@ function NavigationMenu({
   viewport = true,
   ...props
 }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
-  viewport?: boolean
+  viewport?: boolean;
 }) {
   return (
     <NavigationMenuPrimitive.Root
@@ -19,14 +19,14 @@ function NavigationMenu({
       data-viewport={viewport}
       className={cn(
         "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
-        className
+        className,
       )}
       {...props}
     >
       {children}
       {viewport && <NavigationMenuViewport />}
     </NavigationMenuPrimitive.Root>
-  )
+  );
 }
 
 function NavigationMenuList({
@@ -36,13 +36,10 @@ function NavigationMenuList({
   return (
     <NavigationMenuPrimitive.List
       data-slot="navigation-menu-list"
-      className={cn(
-        "group flex flex-1 list-none items-center justify-center gap-1",
-        className
-      )}
+      className={cn("group flex flex-1 list-none items-center justify-center gap-1", className)}
       {...props}
     />
-  )
+  );
 }
 
 function NavigationMenuItem({
@@ -55,12 +52,12 @@ function NavigationMenuItem({
       className={cn("relative", className)}
       {...props}
     />
-  )
+  );
 }
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
-)
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+);
 
 function NavigationMenuTrigger({
   className,
@@ -79,7 +76,7 @@ function NavigationMenuTrigger({
         aria-hidden="true"
       />
     </NavigationMenuPrimitive.Trigger>
-  )
+  );
 }
 
 function NavigationMenuContent({
@@ -92,11 +89,11 @@ function NavigationMenuContent({
       className={cn(
         "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out 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 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
         "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 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:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function NavigationMenuViewport({
@@ -104,21 +101,17 @@ function NavigationMenuViewport({
   ...props
 }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
   return (
-    <div
-      className={cn(
-        "absolute top-full left-0 isolate z-50 flex justify-center"
-      )}
-    >
+    <div className={cn("absolute top-full left-0 isolate z-50 flex justify-center")}>
       <NavigationMenuPrimitive.Viewport
         data-slot="navigation-menu-viewport"
         className={cn(
           "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
-          className
+          className,
         )}
         {...props}
       />
     </div>
-  )
+  );
 }
 
 function NavigationMenuLink({
@@ -130,11 +123,11 @@ function NavigationMenuLink({
       data-slot="navigation-menu-link"
       className={cn(
         "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function NavigationMenuIndicator({
@@ -146,13 +139,13 @@ function NavigationMenuIndicator({
       data-slot="navigation-menu-indicator"
       className={cn(
         "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
-        className
+        className,
       )}
       {...props}
     >
       <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
     </NavigationMenuPrimitive.Indicator>
-  )
+  );
 }
 
 export {
@@ -165,4 +158,4 @@ export {
   NavigationMenuIndicator,
   NavigationMenuViewport,
   navigationMenuTriggerStyle,
-}
+};
diff --git a/apps/web/components/ui/pagination.tsx b/apps/web/components/ui/pagination.tsx
index a611bbe..e833485 100644
--- a/apps/web/components/ui/pagination.tsx
+++ b/apps/web/components/ui/pagination.tsx
@@ -1,12 +1,8 @@
-import * as React from "react"
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  MoreHorizontalIcon,
-} from "lucide-react"
+import * as React from "react";
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils"
-import { buttonVariants, type Button } from "~/components/ui/button"
+import { cn } from "~/lib/utils";
+import { buttonVariants, type Button } from "~/components/ui/button";
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
   return (
@@ -17,37 +13,29 @@ function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
       className={cn("mx-auto flex w-full justify-center", className)}
       {...props}
     />
-  )
+  );
 }
 
-function PaginationContent({
-  className,
-  ...props
-}: React.ComponentProps<"ul">) {
+function PaginationContent({ className, ...props }: React.ComponentProps<"ul">) {
   return (
     <ul
       data-slot="pagination-content"
       className={cn("flex flex-row items-center gap-1", className)}
       {...props}
     />
-  )
+  );
 }
 
 function PaginationItem({ ...props }: React.ComponentProps<"li">) {
-  return <li data-slot="pagination-item" {...props} />
+  return <li data-slot="pagination-item" {...props} />;
 }
 
 type PaginationLinkProps = {
-  isActive?: boolean
+  isActive?: boolean;
 } & Pick<React.ComponentProps<typeof Button>, "size"> &
-  React.ComponentProps<"a">
+  React.ComponentProps<"a">;
 
-function PaginationLink({
-  className,
-  isActive,
-  size = "icon",
-  ...props
-}: PaginationLinkProps) {
+function PaginationLink({ className, isActive, size = "icon", ...props }: PaginationLinkProps) {
   return (
     <a
       aria-current={isActive ? "page" : undefined}
@@ -58,17 +46,14 @@ function PaginationLink({
           variant: isActive ? "outline" : "ghost",
           size,
         }),
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function PaginationPrevious({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) {
+function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
   return (
     <PaginationLink
       aria-label="Go to previous page"
@@ -79,13 +64,10 @@ function PaginationPrevious({
       <ChevronLeftIcon />
       <span className="hidden sm:block">Previous</span>
     </PaginationLink>
-  )
+  );
 }
 
-function PaginationNext({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) {
+function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
   return (
     <PaginationLink
       aria-label="Go to next page"
@@ -96,13 +78,10 @@ function PaginationNext({
       <span className="hidden sm:block">Next</span>
       <ChevronRightIcon />
     </PaginationLink>
-  )
+  );
 }
 
-function PaginationEllipsis({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       aria-hidden
@@ -113,7 +92,7 @@ function PaginationEllipsis({
       <MoreHorizontalIcon className="size-4" />
       <span className="sr-only">More pages</span>
     </span>
-  )
+  );
 }
 
 export {
@@ -124,4 +103,4 @@ export {
   PaginationPrevious,
   PaginationNext,
   PaginationEllipsis,
-}
+};
diff --git a/apps/web/components/ui/popover.tsx b/apps/web/components/ui/popover.tsx
index 9be5957..082eeb4 100644
--- a/apps/web/components/ui/popover.tsx
+++ b/apps/web/components/ui/popover.tsx
@@ -1,20 +1,16 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
-function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+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 PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
 function PopoverContent({
@@ -31,18 +27,16 @@ function PopoverContent({
         sideOffset={sideOffset}
         className={cn(
           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className
+          className,
         )}
         {...props}
       />
     </PopoverPrimitive.Portal>
-  )
+  );
 }
 
-function PopoverAnchor({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/apps/web/components/ui/progress.tsx b/apps/web/components/ui/progress.tsx
index 37f457f..a5a33ac 100644
--- a/apps/web/components/ui/progress.tsx
+++ b/apps/web/components/ui/progress.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function Progress({
   className,
@@ -13,10 +13,7 @@ function Progress({
   return (
     <ProgressPrimitive.Root
       data-slot="progress"
-      className={cn(
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
-        className
-      )}
+      className={cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className)}
       {...props}
     >
       <ProgressPrimitive.Indicator
@@ -25,7 +22,7 @@ function Progress({
         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
       />
     </ProgressPrimitive.Root>
-  )
+  );
 }
 
-export { Progress }
+export { Progress };
diff --git a/apps/web/components/ui/radio-group.tsx b/apps/web/components/ui/radio-group.tsx
index 0204f3c..f817a7d 100644
--- a/apps/web/components/ui/radio-group.tsx
+++ b/apps/web/components/ui/radio-group.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { CircleIcon } from "lucide-react"
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { CircleIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function RadioGroup({
   className,
@@ -16,7 +16,7 @@ function RadioGroup({
       className={cn("grid gap-3", className)}
       {...props}
     />
-  )
+  );
 }
 
 function RadioGroupItem({
@@ -28,7 +28,7 @@ function RadioGroupItem({
       data-slot="radio-group-item"
       className={cn(
         "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     >
@@ -39,7 +39,7 @@ function RadioGroupItem({
         <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
-  )
+  );
 }
 
-export { RadioGroup, RadioGroupItem }
+export { RadioGroup, RadioGroupItem };
diff --git a/apps/web/components/ui/resizable.tsx b/apps/web/components/ui/resizable.tsx
index 461df13..acb2237 100644
--- a/apps/web/components/ui/resizable.tsx
+++ b/apps/web/components/ui/resizable.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { GripVerticalIcon } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
+import * as React from "react";
+import { GripVerticalIcon } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function ResizablePanelGroup({
   className,
@@ -13,19 +13,14 @@ function ResizablePanelGroup({
   return (
     <ResizablePrimitive.Group
       data-slot="resizable-panel-group"
-      className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className
-      )}
+      className={cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className)}
       {...props}
     />
-  )
+  );
 }
 
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+function ResizablePanel({ ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
 }
 
 function ResizableHandle({
@@ -33,14 +28,14 @@ function ResizableHandle({
   className,
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.Separator> & {
-  withHandle?: boolean
+  withHandle?: boolean;
 }) {
   return (
     <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
         "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-        className
+        className,
       )}
       {...props}
     >
@@ -50,7 +45,7 @@ function ResizableHandle({
         </div>
       )}
     </ResizablePrimitive.Separator>
-  )
+  );
 }
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
diff --git a/apps/web/components/ui/scroll-area.tsx b/apps/web/components/ui/scroll-area.tsx
index 424eb4e..cdfd50a 100644
--- a/apps/web/components/ui/scroll-area.tsx
+++ b/apps/web/components/ui/scroll-area.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function ScrollArea({
   className,
@@ -25,7 +25,7 @@ function ScrollArea({
       <ScrollBar />
       <ScrollAreaPrimitive.Corner />
     </ScrollAreaPrimitive.Root>
-  )
+  );
 }
 
 function ScrollBar({
@@ -39,11 +39,9 @@ function ScrollBar({
       orientation={orientation}
       className={cn(
         "flex touch-none p-px transition-colors select-none",
-        orientation === "vertical" &&
-          "h-full w-2.5 border-l border-l-transparent",
-        orientation === "horizontal" &&
-          "h-2.5 flex-col border-t border-t-transparent",
-        className
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        className,
       )}
       {...props}
     >
@@ -52,7 +50,7 @@ function ScrollBar({
         className="bg-border relative flex-1 rounded-full"
       />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  )
+  );
 }
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };
diff --git a/apps/web/components/ui/select.tsx b/apps/web/components/ui/select.tsx
index 1905497..3c9775d 100644
--- a/apps/web/components/ui/select.tsx
+++ b/apps/web/components/ui/select.tsx
@@ -1,27 +1,21 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
 
-function SelectGroup({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }
 
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
 function SelectTrigger({
@@ -30,7 +24,7 @@ function SelectTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
+  size?: "sm" | "default";
 }) {
   return (
     <SelectPrimitive.Trigger
@@ -38,7 +32,7 @@ function SelectTrigger({
       data-size={size}
       className={cn(
         "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 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-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
@@ -47,7 +41,7 @@ function SelectTrigger({
         <ChevronDownIcon className="size-4 opacity-50" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
-  )
+  );
 }
 
 function SelectContent({
@@ -65,7 +59,7 @@ function SelectContent({
           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className
+          className,
         )}
         position={position}
         align={align}
@@ -76,7 +70,7 @@ function SelectContent({
           className={cn(
             "p-1",
             position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
           )}
         >
           {children}
@@ -84,20 +78,17 @@ function SelectContent({
         <SelectScrollDownButton />
       </SelectPrimitive.Content>
     </SelectPrimitive.Portal>
-  )
+  );
 }
 
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
   return (
     <SelectPrimitive.Label
       data-slot="select-label"
       className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SelectItem({
@@ -110,7 +101,7 @@ function SelectItem({
       data-slot="select-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none 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
+        className,
       )}
       {...props}
     >
@@ -124,7 +115,7 @@ function SelectItem({
       </span>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
     </SelectPrimitive.Item>
-  )
+  );
 }
 
 function SelectSeparator({
@@ -137,7 +128,7 @@ function SelectSeparator({
       className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SelectScrollUpButton({
@@ -147,15 +138,12 @@ function SelectScrollUpButton({
   return (
     <SelectPrimitive.ScrollUpButton
       data-slot="select-scroll-up-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
       {...props}
     >
       <ChevronUpIcon className="size-4" />
     </SelectPrimitive.ScrollUpButton>
-  )
+  );
 }
 
 function SelectScrollDownButton({
@@ -165,15 +153,12 @@ function SelectScrollDownButton({
   return (
     <SelectPrimitive.ScrollDownButton
       data-slot="select-scroll-down-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
       {...props}
     >
       <ChevronDownIcon className="size-4" />
     </SelectPrimitive.ScrollDownButton>
-  )
+  );
 }
 
 export {
@@ -187,4 +172,4 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
-}
+};
diff --git a/apps/web/components/ui/separator.tsx b/apps/web/components/ui/separator.tsx
index 5d90a5d..dafb1d0 100644
--- a/apps/web/components/ui/separator.tsx
+++ b/apps/web/components/ui/separator.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function Separator({
   className,
@@ -18,11 +18,11 @@ function Separator({
       orientation={orientation}
       className={cn(
         "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Separator }
+export { Separator };
diff --git a/apps/web/components/ui/sheet.tsx b/apps/web/components/ui/sheet.tsx
index c016b5c..e858e7e 100644
--- a/apps/web/components/ui/sheet.tsx
+++ b/apps/web/components/ui/sheet.tsx
@@ -1,31 +1,25 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
-function SheetTrigger({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...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 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 SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
 }
 
 function SheetOverlay({
@@ -37,11 +31,11 @@ function SheetOverlay({
       data-slot="sheet-overlay"
       className={cn(
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SheetContent({
@@ -50,7 +44,7 @@ function SheetContent({
   side = "right",
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: "top" | "right" | "bottom" | "left"
+  side?: "top" | "right" | "bottom" | "left";
 }) {
   return (
     <SheetPortal>
@@ -67,7 +61,7 @@ function SheetContent({
             "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
           side === "bottom" &&
             "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
-          className
+          className,
         )}
         {...props}
       >
@@ -78,7 +72,7 @@ function SheetContent({
         </SheetPrimitive.Close>
       </SheetPrimitive.Content>
     </SheetPortal>
-  )
+  );
 }
 
 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -88,7 +82,7 @@ function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-1.5 p-4", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -98,20 +92,17 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("mt-auto flex flex-col gap-2 p-4", className)}
       {...props}
     />
-  )
+  );
 }
 
-function SheetTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
       className={cn("text-foreground font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetDescription({
@@ -124,7 +115,7 @@ function SheetDescription({
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -136,4 +127,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-}
+};
diff --git a/apps/web/components/ui/sidebar.tsx b/apps/web/components/ui/sidebar.tsx
index a971887..90a1652 100644
--- a/apps/web/components/ui/sidebar.tsx
+++ b/apps/web/components/ui/sidebar.tsx
@@ -1,56 +1,51 @@
-"use client"
-
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-import { PanelLeftIcon } from "lucide-react"
-
-import { useIsMobile } from "~/hooks/use-mobile"
-import { cn } from "~/lib/utils"
-import { Button } from "~/components/ui/button"
-import { Input } from "~/components/ui/input"
-import { Separator } from "~/components/ui/separator"
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { PanelLeftIcon } from "lucide-react";
+
+import { useIsMobile } from "~/hooks/use-mobile";
+import { cn } from "~/lib/utils";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Separator } from "~/components/ui/separator";
 import {
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
-} from "~/components/ui/sheet"
-import { Skeleton } from "~/components/ui/skeleton"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "~/components/ui/tooltip"
-
-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"
+} from "~/components/ui/sheet";
+import { Skeleton } from "~/components/ui/skeleton";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";
+
+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
-}
+  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)
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
 
 function useSidebar() {
-  const context = React.useContext(SidebarContext)
+  const context = React.useContext(SidebarContext);
   if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.")
+    throw new Error("useSidebar must be used within a SidebarProvider.");
   }
 
-  return context
+  return context;
 }
 
 function SidebarProvider({
@@ -62,56 +57,53 @@ function SidebarProvider({
   children,
   ...props
 }: React.ComponentProps<"div"> & {
-  defaultOpen?: boolean
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }) {
-  const isMobile = useIsMobile()
-  const [openMobile, setOpenMobile] = React.useState(false)
+  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 [_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
+      const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
-        setOpenProp(openState)
+        setOpenProp(openState);
       } else {
-        _setOpen(openState)
+        _setOpen(openState);
       }
 
       // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
-    [setOpenProp, open]
-  )
+    [setOpenProp, open],
+  );
 
   // Helper to toggle the sidebar.
   const toggleSidebar = React.useCallback(() => {
-    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
-  }, [isMobile, setOpen, setOpenMobile])
+    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()
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
       }
-    }
+    };
 
-    window.addEventListener("keydown", handleKeyDown)
-    return () => window.removeEventListener("keydown", handleKeyDown)
-  }, [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 state = open ? "expanded" : "collapsed";
 
   const contextValue = React.useMemo<SidebarContextProps>(
     () => ({
@@ -123,8 +115,8 @@ function SidebarProvider({
       setOpenMobile,
       toggleSidebar,
     }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-  )
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+  );
 
   return (
     <SidebarContext.Provider value={contextValue}>
@@ -140,7 +132,7 @@ function SidebarProvider({
           }
           className={cn(
             "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
-            className
+            className,
           )}
           {...props}
         >
@@ -148,7 +140,7 @@ function SidebarProvider({
         </div>
       </TooltipProvider>
     </SidebarContext.Provider>
-  )
+  );
 }
 
 function Sidebar({
@@ -159,11 +151,11 @@ function Sidebar({
   children,
   ...props
 }: React.ComponentProps<"div"> & {
-  side?: "left" | "right"
-  variant?: "sidebar" | "floating" | "inset"
-  collapsible?: "offcanvas" | "icon" | "none"
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
 }) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
   if (collapsible === "none") {
     return (
@@ -171,13 +163,13 @@ function Sidebar({
         data-slot="sidebar"
         className={cn(
           "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
-          className
+          className,
         )}
         {...props}
       >
         {children}
       </div>
-    )
+    );
   }
 
   if (isMobile) {
@@ -202,7 +194,7 @@ function Sidebar({
           <div className="flex h-full w-full flex-col">{children}</div>
         </SheetContent>
       </Sheet>
-    )
+    );
   }
 
   return (
@@ -223,7 +215,7 @@ function Sidebar({
           "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)"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
         )}
       />
       <div
@@ -237,7 +229,7 @@ function Sidebar({
           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-r group-data-[side=right]:border-l",
-          className
+          className,
         )}
         {...props}
       >
@@ -250,15 +242,11 @@ function Sidebar({
         </div>
       </div>
     </div>
-  )
+  );
 }
 
-function SidebarTrigger({
-  className,
-  onClick,
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { toggleSidebar } = useSidebar()
+function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar();
 
   return (
     <Button
@@ -268,19 +256,19 @@ function SidebarTrigger({
       size="icon"
       className={cn("size-7", className)}
       onClick={(event) => {
-        onClick?.(event)
-        toggleSidebar()
+        onClick?.(event);
+        toggleSidebar();
       }}
       {...props}
     >
       <PanelLeftIcon />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
-  )
+  );
 }
 
 function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
-  const { toggleSidebar } = useSidebar()
+  const { toggleSidebar } = useSidebar();
 
   return (
     <button
@@ -297,11 +285,11 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
         "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
@@ -311,17 +299,14 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
       className={cn(
         "bg-background relative flex w-full flex-1 flex-col",
         "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof Input>) {
+function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
   return (
     <Input
       data-slot="sidebar-input"
@@ -329,7 +314,7 @@ function SidebarInput({
       className={cn("bg-background h-8 w-full shadow-none", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -340,7 +325,7 @@ function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-2 p-2", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -351,13 +336,10 @@ function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-2 p-2", className)}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
+function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
   return (
     <Separator
       data-slot="sidebar-separator"
@@ -365,7 +347,7 @@ function SidebarSeparator({
       className={cn("bg-sidebar-border mx-2 w-auto", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
@@ -375,11 +357,11 @@ function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
       data-sidebar="content"
       className={cn(
         "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
@@ -390,7 +372,7 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarGroupLabel({
@@ -398,7 +380,7 @@ function SidebarGroupLabel({
   asChild = false,
   ...props
 }: React.ComponentProps<"div"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "div"
+  const Comp = asChild ? Slot : "div";
 
   return (
     <Comp
@@ -407,11 +389,11 @@ function SidebarGroupLabel({
       className={cn(
         "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarGroupAction({
@@ -419,7 +401,7 @@ function SidebarGroupAction({
   asChild = false,
   ...props
 }: React.ComponentProps<"button"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : "button";
 
   return (
     <Comp
@@ -430,17 +412,14 @@ function SidebarGroupAction({
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 md:after:hidden",
         "group-data-[collapsible=icon]:hidden",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarGroupContent({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-group-content"
@@ -448,7 +427,7 @@ function SidebarGroupContent({
       className={cn("w-full text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
@@ -459,7 +438,7 @@ function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
       className={cn("flex w-full min-w-0 flex-col gap-1", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
@@ -470,7 +449,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
       className={cn("group/menu-item relative", className)}
       {...props}
     />
-  )
+  );
 }
 
 const sidebarMenuButtonVariants = cva(
@@ -492,8 +471,8 @@ const sidebarMenuButtonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 function SidebarMenuButton({
   asChild = false,
@@ -504,12 +483,12 @@ function SidebarMenuButton({
   className,
   ...props
 }: React.ComponentProps<"button"> & {
-  asChild?: boolean
-  isActive?: boolean
-  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  asChild?: boolean;
+  isActive?: boolean;
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
 } & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const Comp = asChild ? Slot : "button"
-  const { isMobile, state } = useSidebar()
+  const Comp = asChild ? Slot : "button";
+  const { isMobile, state } = useSidebar();
 
   const button = (
     <Comp
@@ -520,16 +499,16 @@ function SidebarMenuButton({
       className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
       {...props}
     />
-  )
+  );
 
   if (!tooltip) {
-    return button
+    return button;
   }
 
   if (typeof tooltip === "string") {
     tooltip = {
       children: tooltip,
-    }
+    };
   }
 
   return (
@@ -542,7 +521,7 @@ function SidebarMenuButton({
         {...tooltip}
       />
     </Tooltip>
-  )
+  );
 }
 
 function SidebarMenuAction({
@@ -551,10 +530,10 @@ function SidebarMenuAction({
   showOnHover = false,
   ...props
 }: React.ComponentProps<"button"> & {
-  asChild?: boolean
-  showOnHover?: boolean
+  asChild?: boolean;
+  showOnHover?: boolean;
 }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : "button";
 
   return (
     <Comp
@@ -570,17 +549,14 @@ function SidebarMenuAction({
         "group-data-[collapsible=icon]:hidden",
         showOnHover &&
           "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarMenuBadge({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-menu-badge"
@@ -592,11 +568,11 @@ function SidebarMenuBadge({
         "peer-data-[size=default]/menu-button:top-1.5",
         "peer-data-[size=lg]/menu-button:top-2.5",
         "group-data-[collapsible=icon]:hidden",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenuSkeleton({
@@ -604,12 +580,12 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }: React.ComponentProps<"div"> & {
-  showIcon?: boolean
+  showIcon?: boolean;
 }) {
   // Random width between 50 to 90%.
   const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`
-  }, [])
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
 
   return (
     <div
@@ -618,12 +594,7 @@ function SidebarMenuSkeleton({
       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"
-        />
-      )}
+      {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"
@@ -634,7 +605,7 @@ function SidebarMenuSkeleton({
         }
       />
     </div>
-  )
+  );
 }
 
 function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
@@ -645,17 +616,14 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
       className={cn(
         "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
         "group-data-[collapsible=icon]:hidden",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarMenuSubItem({
-  className,
-  ...props
-}: React.ComponentProps<"li">) {
+function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">) {
   return (
     <li
       data-slot="sidebar-menu-sub-item"
@@ -663,7 +631,7 @@ function SidebarMenuSubItem({
       className={cn("group/menu-sub-item relative", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenuSubButton({
@@ -673,11 +641,11 @@ function SidebarMenuSubButton({
   className,
   ...props
 }: React.ComponentProps<"a"> & {
-  asChild?: boolean
-  size?: "sm" | "md"
-  isActive?: boolean
+  asChild?: boolean;
+  size?: "sm" | "md";
+  isActive?: boolean;
 }) {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? Slot : "a";
 
   return (
     <Comp
@@ -691,11 +659,11 @@ function SidebarMenuSubButton({
         size === "sm" && "text-xs",
         size === "md" && "text-sm",
         "group-data-[collapsible=icon]:hidden",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -723,4 +691,4 @@ export {
   SidebarSeparator,
   SidebarTrigger,
   useSidebar,
-}
+};
diff --git a/apps/web/components/ui/skeleton.tsx b/apps/web/components/ui/skeleton.tsx
index 1e29d7a..399bb1e 100644
--- a/apps/web/components/ui/skeleton.tsx
+++ b/apps/web/components/ui/skeleton.tsx
@@ -1,4 +1,4 @@
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -7,7 +7,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("bg-accent animate-pulse rounded-md", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };
diff --git a/apps/web/components/ui/slider.tsx b/apps/web/components/ui/slider.tsx
index c54b553..3cb2d51 100644
--- a/apps/web/components/ui/slider.tsx
+++ b/apps/web/components/ui/slider.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SliderPrimitive from "@radix-ui/react-slider"
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function Slider({
   className,
@@ -14,14 +14,9 @@ function Slider({
   ...props
 }: React.ComponentProps<typeof SliderPrimitive.Root>) {
   const _values = React.useMemo(
-    () =>
-      Array.isArray(value)
-        ? value
-        : Array.isArray(defaultValue)
-          ? defaultValue
-          : [min, max],
-    [value, defaultValue, min, max]
-  )
+    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
+    [value, defaultValue, min, max],
+  );
 
   return (
     <SliderPrimitive.Root
@@ -32,20 +27,20 @@ function Slider({
       max={max}
       className={cn(
         "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
-        className
+        className,
       )}
       {...props}
     >
       <SliderPrimitive.Track
         data-slot="slider-track"
         className={cn(
-          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
         )}
       >
         <SliderPrimitive.Range
           data-slot="slider-range"
           className={cn(
-            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
           )}
         />
       </SliderPrimitive.Track>
@@ -57,7 +52,7 @@ function Slider({
         />
       ))}
     </SliderPrimitive.Root>
-  )
+  );
 }
 
-export { Slider }
+export { Slider };
diff --git a/apps/web/components/ui/sonner.tsx b/apps/web/components/ui/sonner.tsx
index 30a49df..e21c8ab 100644
--- a/apps/web/components/ui/sonner.tsx
+++ b/apps/web/components/ui/sonner.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import {
   CircleCheckIcon,
@@ -6,8 +6,8 @@ import {
   Loader2Icon,
   OctagonXIcon,
   TriangleAlertIcon,
-} from "lucide-react"
-import { Toaster as Sonner, type ToasterProps } from "sonner"
+} from "lucide-react";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
 
 const Toaster = ({ ...props }: ToasterProps) => {
   return (
@@ -31,7 +31,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
       }
       {...props}
     />
-  )
-}
+  );
+};
 
-export { Toaster }
+export { Toaster };
diff --git a/apps/web/components/ui/spinner.tsx b/apps/web/components/ui/spinner.tsx
index 47965cb..34e3ac2 100644
--- a/apps/web/components/ui/spinner.tsx
+++ b/apps/web/components/ui/spinner.tsx
@@ -1,6 +1,6 @@
-import { Loader2Icon } from "lucide-react"
+import { Loader2Icon } from "lucide-react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
   return (
@@ -10,7 +10,7 @@ function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
       className={cn("size-4 animate-spin", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Spinner }
+export { Spinner };
diff --git a/apps/web/components/ui/switch.tsx b/apps/web/components/ui/switch.tsx
index 726a7f2..6f08037 100644
--- a/apps/web/components/ui/switch.tsx
+++ b/apps/web/components/ui/switch.tsx
@@ -1,31 +1,28 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SwitchPrimitive from "@radix-ui/react-switch"
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
-function Switch({
-  className,
-  ...props
-}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
   return (
     <SwitchPrimitive.Root
       data-slot="switch"
       className={cn(
         "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     >
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
         className={cn(
-          "bg-background=unchecked]:bg-foreground=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+          "bg-background=unchecked]:bg-foreground=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
         )}
       />
     </SwitchPrimitive.Root>
-  )
+  );
 }
 
-export { Switch }
+export { Switch };
diff --git a/apps/web/components/ui/table.tsx b/apps/web/components/ui/table.tsx
index 80e98d4..210077c 100644
--- a/apps/web/components/ui/table.tsx
+++ b/apps/web/components/ui/table.tsx
@@ -1,32 +1,23 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function Table({ className, ...props }: React.ComponentProps<"table">) {
   return (
-    <div
-      data-slot="table-container"
-      className="relative w-full overflow-x-auto"
-    >
+    <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}
-    />
-  )
+  return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />;
 }
 
 function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
@@ -36,20 +27,17 @@ function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
       className={cn("[&_tr:last-child]:border-0", className)}
       {...props}
     />
-  )
+  );
 }
 
 function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
   return (
     <tfoot
       data-slot="table-footer"
-      className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
-        className
-      )}
+      className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
       {...props}
     />
-  )
+  );
 }
 
 function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
@@ -58,11 +46,11 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
       data-slot="table-row"
       className={cn(
         "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TableHead({ className, ...props }: React.ComponentProps<"th">) {
@@ -71,11 +59,11 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
       data-slot="table-head"
       className={cn(
         "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TableCell({ className, ...props }: React.ComponentProps<"td">) {
@@ -84,33 +72,21 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
       data-slot="table-cell"
       className={cn(
         "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function TableCaption({
-  className,
-  ...props
-}: React.ComponentProps<"caption">) {
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
   return (
     <caption
       data-slot="table-caption"
       className={cn("text-muted-foreground mt-4 text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/apps/web/components/ui/tabs.tsx b/apps/web/components/ui/tabs.tsx
index 9796ae5..7e14a6b 100644
--- a/apps/web/components/ui/tabs.tsx
+++ b/apps/web/components/ui/tabs.tsx
@@ -1,66 +1,54 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
-function Tabs({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
   return (
     <TabsPrimitive.Root
       data-slot="tabs"
       className={cn("flex flex-col gap-2", className)}
       {...props}
     />
-  )
+  );
 }
 
-function TabsList({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
+function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
   return (
     <TabsPrimitive.List
       data-slot="tabs-list"
       className={cn(
         "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function TabsTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
   return (
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
         "data-[state=active]:bg-background focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground 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 transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function TabsContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
   return (
     <TabsPrimitive.Content
       data-slot="tabs-content"
       className={cn("flex-1 outline-none", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/apps/web/components/ui/textarea.tsx b/apps/web/components/ui/textarea.tsx
index 0f74bfc..193846c 100644
--- a/apps/web/components/ui/textarea.tsx
+++ b/apps/web/components/ui/textarea.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
@@ -8,11 +8,11 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
       data-slot="textarea"
       className={cn(
         "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Textarea }
+export { Textarea };
diff --git a/apps/web/components/ui/toggle-group.tsx b/apps/web/components/ui/toggle-group.tsx
index 4579bb5..be5a031 100644
--- a/apps/web/components/ui/toggle-group.tsx
+++ b/apps/web/components/ui/toggle-group.tsx
@@ -1,21 +1,21 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
-import { type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
 
-import { cn } from "~/lib/utils"
-import { toggleVariants } from "~/components/ui/toggle"
+import { cn } from "~/lib/utils";
+import { toggleVariants } from "~/components/ui/toggle";
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants> & {
-    spacing?: number
+    spacing?: number;
   }
 >({
   size: "default",
   variant: "default",
   spacing: 0,
-})
+});
 
 function ToggleGroup({
   className,
@@ -26,7 +26,7 @@ function ToggleGroup({
   ...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
   VariantProps<typeof toggleVariants> & {
-    spacing?: number
+    spacing?: number;
   }) {
   return (
     <ToggleGroupPrimitive.Root
@@ -37,7 +37,7 @@ function ToggleGroup({
       style={{ "--gap": spacing } as React.CSSProperties}
       className={cn(
         "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
-        className
+        className,
       )}
       {...props}
     >
@@ -45,7 +45,7 @@ function ToggleGroup({
         {children}
       </ToggleGroupContext.Provider>
     </ToggleGroupPrimitive.Root>
-  )
+  );
 }
 
 function ToggleGroupItem({
@@ -54,9 +54,8 @@ function ToggleGroupItem({
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
-  VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext)
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext);
 
   return (
     <ToggleGroupPrimitive.Item
@@ -71,13 +70,13 @@ function ToggleGroupItem({
         }),
         "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
         "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
-        className
+        className,
       )}
       {...props}
     >
       {children}
     </ToggleGroupPrimitive.Item>
-  )
+  );
 }
 
-export { ToggleGroup, ToggleGroupItem }
+export { ToggleGroup, ToggleGroupItem };
diff --git a/apps/web/components/ui/toggle.tsx b/apps/web/components/ui/toggle.tsx
index f246b43..267bfe8 100644
--- a/apps/web/components/ui/toggle.tsx
+++ b/apps/web/components/ui/toggle.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 const toggleVariants = cva(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 aria-invalid:border-destructive whitespace-nowrap",
@@ -25,23 +25,22 @@ const toggleVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 function Toggle({
   className,
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
+}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
   return (
     <TogglePrimitive.Root
       data-slot="toggle"
       className={cn(toggleVariants({ variant, size, className }))}
       {...props}
     />
-  )
+  );
 }
 
-export { Toggle, toggleVariants }
+export { Toggle, toggleVariants };
diff --git a/apps/web/components/ui/tooltip.tsx b/apps/web/components/ui/tooltip.tsx
index 907ab79..d43dab3 100644
--- a/apps/web/components/ui/tooltip.tsx
+++ b/apps/web/components/ui/tooltip.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function TooltipProvider({
   delayDuration = 0,
@@ -15,23 +15,19 @@ function TooltipProvider({
       delayDuration={delayDuration}
       {...props}
     />
-  )
+  );
 }
 
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
   return (
     <TooltipProvider>
       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
     </TooltipProvider>
-  )
+  );
 }
 
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
 function TooltipContent({
@@ -47,7 +43,7 @@ function TooltipContent({
         sideOffset={sideOffset}
         className={cn(
           "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
+          className,
         )}
         {...props}
       >
@@ -55,7 +51,7 @@ function TooltipContent({
         <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
-  )
+  );
 }
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/apps/web/hooks/api/analytics/index.ts b/apps/web/hooks/api/analytics/index.ts
index 98b524c..3b0ef60 100644
--- a/apps/web/hooks/api/analytics/index.ts
+++ b/apps/web/hooks/api/analytics/index.ts
@@ -1,4 +1,4 @@
-import { trpc } from "~/trpc/client"
+import { trpc } from "~/trpc/client";
 
 /**
  * Fetches all free-tier analytics metrics for a single form.
@@ -7,32 +7,32 @@ import { trpc } from "~/trpc/client"
  *          avgSubmissionsPerDay, avgSubmissionsPerWeek.
  */
 export const useGetFormAnalytics = (formId: string) => {
-    const {
-        data: analytics,
-        error,
-        isLoading,
-        isError,
-        isSuccess,
-        refetch,
-    } = trpc.analytics.getFormAnalytics.useQuery(
-        { formId },
-        {
-            enabled: !!formId && formId.length === 36,
-            // Analytics for a published form changes only when new
-            // submissions arrive. 30s freshness gives back-nav within
-            // the dashboard near-instant feel while still picking up
-            // fresh responses on the next visit. Submission mutations
-            // do not invalidate this key (they come from public form
-            // visitors, not the studio user), so this is also the
-            // upper bound on UI staleness — adjust if you wire up a
-            // live channel later.
-            staleTime: 30_000,
-            refetchOnWindowFocus: false,
-        }
-    )
+  const {
+    data: analytics,
+    error,
+    isLoading,
+    isError,
+    isSuccess,
+    refetch,
+  } = trpc.analytics.getFormAnalytics.useQuery(
+    { formId },
+    {
+      enabled: !!formId && formId.length === 36,
+      // Analytics for a published form changes only when new
+      // submissions arrive. 30s freshness gives back-nav within
+      // the dashboard near-instant feel while still picking up
+      // fresh responses on the next visit. Submission mutations
+      // do not invalidate this key (they come from public form
+      // visitors, not the studio user), so this is also the
+      // upper bound on UI staleness — adjust if you wire up a
+      // live channel later.
+      staleTime: 30_000,
+      refetchOnWindowFocus: false,
+    },
+  );
 
-    return { analytics, error, isLoading, isError, isSuccess, refetch }
-}
+  return { analytics, error, isLoading, isError, isSuccess, refetch };
+};
 
 /**
  * Cursor-paginated submissions for the analytics table.
@@ -47,66 +47,68 @@ export const useGetFormAnalytics = (formId: string) => {
  * worth watching if a user loads thousands of rows.
  */
 export const useGetSubmissions = (formId: string) => {
-    const PAGE_SIZE = 100
-    const enabled = !!formId && formId.length === 36
+  const PAGE_SIZE = 100;
+  const enabled = !!formId && formId.length === 36;
 
-    const result = trpc.analytics.getSubmissions.useInfiniteQuery(
-        { formId, limit: PAGE_SIZE },
-        {
-            enabled,
-            initialCursor: null,
-            getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
-            refetchInterval: (query) =>
-                typeof document !== "undefined" && document.visibilityState === "visible" && query.state.data
-                    ? 30_000
-                    : false,
-        }
-    )
+  const result = trpc.analytics.getSubmissions.useInfiniteQuery(
+    { formId, limit: PAGE_SIZE },
+    {
+      enabled,
+      initialCursor: null,
+      getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
+      refetchInterval: (query) =>
+        typeof document !== "undefined" &&
+        document.visibilityState === "visible" &&
+        query.state.data
+          ? 30_000
+          : false,
+    },
+  );
 
-    // Flatten the pages so the consumer sees a single submissions list.
-    const submissions = result.data?.pages.flatMap((p) => p.submissions) ?? []
+  // Flatten the pages so the consumer sees a single submissions list.
+  const submissions = result.data?.pages.flatMap((p) => p.submissions) ?? [];
 
-    return {
-        submissions,
-        error: result.error,
-        isLoading: result.isLoading,
-        isError: result.isError,
-        isSuccess: result.isSuccess,
-        refetch: result.refetch,
-        fetchNextPage: result.fetchNextPage,
-        hasNextPage: !!result.hasNextPage,
-        isFetchingNextPage: result.isFetchingNextPage,
-    }
-}
+  return {
+    submissions,
+    error: result.error,
+    isLoading: result.isLoading,
+    isError: result.isError,
+    isSuccess: result.isSuccess,
+    refetch: result.refetch,
+    fetchNextPage: result.fetchNextPage,
+    hasNextPage: !!result.hasNextPage,
+    isFetchingNextPage: result.isFetchingNextPage,
+  };
+};
 
 /**
  * Records that a visitor answered a field and clicked Next.
  * Called on each Next click in the public form page.
  */
 export const useRecordFieldAnswer = () => {
-    const {
-        mutate: recordFieldAnswer,
-        mutateAsync: recordFieldAnswerAsync,
-        isPending,
-    } = trpc.analytics.recordFieldAnswer.useMutation()
+  const {
+    mutate: recordFieldAnswer,
+    mutateAsync: recordFieldAnswerAsync,
+    isPending,
+  } = trpc.analytics.recordFieldAnswer.useMutation();
 
-    return { recordFieldAnswer, recordFieldAnswerAsync, isPending }
-}
+  return { recordFieldAnswer, recordFieldAnswerAsync, isPending };
+};
 
 /**
  * Records a view for a public form page.
  */
 export const useRecordView = () => {
-    const {
-        mutateAsync: recordViewAsync,
-        mutate: recordView,
-        error,
-        isPending,
-        isSuccess,
-    } = trpc.analytics.recordView.useMutation()
+  const {
+    mutateAsync: recordViewAsync,
+    mutate: recordView,
+    error,
+    isPending,
+    isSuccess,
+  } = trpc.analytics.recordView.useMutation();
 
-    return { recordViewAsync, recordView, error, isPending, isSuccess }
-}
+  return { recordViewAsync, recordView, error, isPending, isSuccess };
+};
 
 /**
  * Pro-tier: per-question distribution, day-of-week breakdown,
@@ -115,19 +117,19 @@ export const useRecordView = () => {
  * via useGetMe — the server will still enforce it, but the client gates first.
  */
 export const useGetProAnalytics = (formId: string) => {
-    const {
-        data: proAnalytics,
-        error,
-        isLoading,
-        isError,
-        refetch,
-    } = trpc.analytics.getProAnalytics.useQuery(
-        { formId },
-        { enabled: !!formId && formId.length === 36, retry: false }
-    )
+  const {
+    data: proAnalytics,
+    error,
+    isLoading,
+    isError,
+    refetch,
+  } = trpc.analytics.getProAnalytics.useQuery(
+    { formId },
+    { enabled: !!formId && formId.length === 36, retry: false },
+  );
 
-    return { proAnalytics, error, isLoading, isError, refetch }
-}
+  return { proAnalytics, error, isLoading, isError, refetch };
+};
 
 /**
  * Returns the current user's plan from the session (via the form list endpoint
@@ -135,8 +137,8 @@ export const useGetProAnalytics = (formId: string) => {
  * on the server; here we just check if the Pro analytics query returns FORBIDDEN.
  */
 export const useUserPlan = () => {
-    const { data } = trpc.form.listFormsByUserId.useQuery()
-    // plan is not directly exposed — use isForbidden from useGetProAnalytics instead
-    // This hook is a placeholder for when plan is exposed on the context.
-    return { hasPro: false, hasData: !!data }
-}
+  const { data } = trpc.form.listFormsByUserId.useQuery();
+  // plan is not directly exposed — use isForbidden from useGetProAnalytics instead
+  // This hook is a placeholder for when plan is exposed on the context.
+  return { hasPro: false, hasData: !!data };
+};
diff --git a/apps/web/hooks/api/auth/index.ts b/apps/web/hooks/api/auth/index.ts
index 7ab34ce..5e40dbe 100644
--- a/apps/web/hooks/api/auth/index.ts
+++ b/apps/web/hooks/api/auth/index.ts
@@ -7,7 +7,7 @@ export const useSignUp = () => {
 
   const createUserWithEmailAndPassword = async (
     data: any,
-    options?: { onSuccess?: () => void; onError?: (err: Error) => void }
+    options?: { onSuccess?: () => void; onError?: (err: Error) => void },
   ) => {
     setIsPending(true);
     setError(null);
@@ -43,7 +43,7 @@ export const useSignIn = () => {
 
   const signInUserWithEmailAndPassword = async (
     data: any,
-    options?: { onSuccess?: () => void; onError?: (err: Error) => void }
+    options?: { onSuccess?: () => void; onError?: (err: Error) => void },
   ) => {
     setIsPending(true);
     setError(null);
@@ -57,7 +57,6 @@ export const useSignIn = () => {
       }
       document.cookie = `cf_session=1; path=/; max-age=${60 * 60 * 24 * 7}; secure; samesite=lax`;
       options?.onSuccess?.();
-
     } catch (err: any) {
       setError(err);
       options?.onError?.(err);
@@ -98,7 +97,8 @@ export const useSignOut = () => {
     setError(null);
     try {
       await authClient.signOut();
-      document.cookie = 'cf_session=; path=/; max-age=0; expires=Thu, 01 Jan 1970 00:00:00 GMT; secure; samesite=lax';
+      document.cookie =
+        "cf_session=; path=/; max-age=0; expires=Thu, 01 Jan 1970 00:00:00 GMT; secure; samesite=lax";
     } catch (err: any) {
       setError(err);
     } finally {
@@ -111,4 +111,4 @@ export const useSignOut = () => {
     error,
     isPending,
   };
-};
\ No newline at end of file
+};
diff --git a/apps/web/hooks/api/form/index.ts b/apps/web/hooks/api/form/index.ts
index c390fd4..414ca0f 100644
--- a/apps/web/hooks/api/form/index.ts
+++ b/apps/web/hooks/api/form/index.ts
@@ -1,556 +1,577 @@
-import { trpc } from "~/trpc/client"
+import { trpc } from "~/trpc/client";
 
 export const useCreateForm = () => {
-    const utils = trpc.useUtils()
-
-    const {
-        mutateAsync: createFormAsync,
-        mutate: createForm,
-        error,
-        failureCount,
-        isError,
-        isIdle,
-        isPending,
-        isSuccess,
-        status
-    } = trpc.form.createForm.useMutation({
-        // Optimistic update: add a placeholder form immediately so the UI
-        // feels instant. The server response replaces it on success.
-        onMutate: async (input) => {
-            await utils.form.listFormsByUserId.cancel()
-            const previous = utils.form.listFormsByUserId.getData()
-
-            utils.form.listFormsByUserId.setData(undefined, (old) => {
-                const optimistic = {
-                    id: `optimistic-${Date.now()}`,
-                    title: input.title,
-                    description: input.description ?? null,
-                    slug: input.slug,
-                    isPublished: false,
-                    isArchived: false,
-                    isOpen: true,
-                    createdAt: new Date(),
-                    updatedAt: new Date(),
-                    publishedAt: null,
-                    submissionsCount: 0,
-                    role: "owner" as const,
-                    permissions: {
-                        builder: { canView: true, canEdit: true },
-                        analytics: { canView: true },
-                        responses: { canView: true },
-                        settings: { canDelete: true, canPublish: true, canArchive: true, canShare: true }
-                    }
-                }
-                return old ? [optimistic, ...old] : [optimistic]
-            })
-
-            return { previous }
-        },
-        onError: (_err, _input, context) => {
-            // Roll back on error
-            if (context?.previous !== undefined) {
-                utils.form.listFormsByUserId.setData(undefined, context.previous)
-            }
-        },
-        onSettled: async () => {
-            // Always refetch to get the real server data
-            await utils.form.listFormsByUserId.invalidate()
-            await utils.form.getDashboardStats.invalidate()
-        }
-    })
-
-    return {
-        createFormAsync,
-        createForm,
-        error,
-        isError,
-        isIdle,
-        isPending,
-        isSuccess,
-        status,
-        failureCount
-    }
-}
+  const utils = trpc.useUtils();
+
+  const {
+    mutateAsync: createFormAsync,
+    mutate: createForm,
+    error,
+    failureCount,
+    isError,
+    isIdle,
+    isPending,
+    isSuccess,
+    status,
+  } = trpc.form.createForm.useMutation({
+    // Optimistic update: add a placeholder form immediately so the UI
+    // feels instant. The server response replaces it on success.
+    onMutate: async (input) => {
+      await utils.form.listFormsByUserId.cancel();
+      const previous = utils.form.listFormsByUserId.getData();
+
+      utils.form.listFormsByUserId.setData(undefined, (old) => {
+        const optimistic = {
+          id: `optimistic-${Date.now()}`,
+          title: input.title,
+          description: input.description ?? null,
+          slug: input.slug,
+          isPublished: false,
+          isArchived: false,
+          isOpen: true,
+          createdAt: new Date(),
+          updatedAt: new Date(),
+          publishedAt: null,
+          submissionsCount: 0,
+          role: "owner" as const,
+          permissions: {
+            builder: { canView: true, canEdit: true },
+            analytics: { canView: true },
+            responses: { canView: true },
+            settings: { canDelete: true, canPublish: true, canArchive: true, canShare: true },
+          },
+        };
+        return old ? [optimistic, ...old] : [optimistic];
+      });
+
+      return { previous };
+    },
+    onError: (_err, _input, context) => {
+      // Roll back on error
+      if (context?.previous !== undefined) {
+        utils.form.listFormsByUserId.setData(undefined, context.previous);
+      }
+    },
+    onSettled: async () => {
+      // Always refetch to get the real server data
+      await utils.form.listFormsByUserId.invalidate();
+      await utils.form.getDashboardStats.invalidate();
+    },
+  });
+
+  return {
+    createFormAsync,
+    createForm,
+    error,
+    isError,
+    isIdle,
+    isPending,
+    isSuccess,
+    status,
+    failureCount,
+  };
+};
 
 export const useListFormsByUserId = () => {
-    const {
-        data: forms,
-        error,
-        failureCount,
-        isError,
-        isSuccess,
-        status,
-        isLoading,
-        refetch
-    } = trpc.form.listFormsByUserId.useQuery(undefined, {
-        // My Forms list is read on the sketches page and the analytics
-        // sidebar; both pages get hit on back-nav. Same caching policy
-        // as the dashboard — 60s freshness, no refetch-on-focus.
-        // Mutations (create/update/delete form) already invalidate this
-        // key, so stale data can't survive a real change.
-        staleTime: 60_000,
-        refetchOnWindowFocus: false,
-    })
-
-    return {
-        forms,
-        error,
-        isError,
-        isSuccess,
-        status,
-        failureCount,
-        isLoading,
-        refetch
-    }
-}
+  const {
+    data: forms,
+    error,
+    failureCount,
+    isError,
+    isSuccess,
+    status,
+    isLoading,
+    refetch,
+  } = trpc.form.listFormsByUserId.useQuery(undefined, {
+    // My Forms list is read on the sketches page and the analytics
+    // sidebar; both pages get hit on back-nav. Same caching policy
+    // as the dashboard — 60s freshness, no refetch-on-focus.
+    // Mutations (create/update/delete form) already invalidate this
+    // key, so stale data can't survive a real change.
+    staleTime: 60_000,
+    refetchOnWindowFocus: false,
+  });
+
+  return {
+    forms,
+    error,
+    isError,
+    isSuccess,
+    status,
+    failureCount,
+    isLoading,
+    refetch,
+  };
+};
 
 export const useCreateFormField = () => {
-    const utils = trpc.useUtils()
-
-    const {
-        mutateAsync: createFormFieldAsync,
-        mutate: createFormField,
-        error,
-        failureCount,
-        isError,
-        isIdle,
-        isPending,
-        isSuccess,
-        status
-    } = trpc.form.createFormField.useMutation({
-        onMutate: async (input) => {
-            // Cancel any in-flight refetches for this form's fields
-            await utils.form.listFormFields.cancel({ formId: input.formId })
-            const previous = utils.form.listFormFields.getData({ formId: input.formId })
-
-            // Optimistically add the new field so the canvas updates instantly
-            utils.form.listFormFields.setData({ formId: input.formId }, (old) => {
-                const optimistic = {
-                    id: `optimistic-${Date.now()}`,
-                    formId: input.formId,
-                    label: input.label ?? "",
-                    labelKey: input.label?.toLowerCase().replace(/[^a-z0-9]+/g, "-") ?? "field",
-                    placeholder: input.placeholder ?? null,
-                    isRequired: input.isRequired ?? false,
-                    index: String(((old?.length ?? 0) + 1).toFixed(2)),
-                    type: input.type,
-                    options: input.options ?? null,
-                    description: input.description ?? null,
-                    // Optimistic baseline — the real version is set when
-                    // the server reply lands and the cache is refreshed.
-                    version: 0,
-                    createdAt: new Date(),
-                    updatedAt: new Date(),
-                }
-                return old ? [...old, optimistic] : [optimistic]
-            })
-
-            return { previous, formId: input.formId }
-        },
-        onError: (_err, _input, context) => {
-            if (context?.previous !== undefined) {
-                utils.form.listFormFields.setData({ formId: context.formId }, context.previous)
-            }
-        },
-        onSettled: (_data, _err, input) => {
-            // Only refetch fields for this specific form — not the entire router
-            void utils.form.listFormFields.invalidate({ formId: input.formId })
-        }
-    })
-
-    return {
-        createFormFieldAsync,
-        createFormField,
-        error,
-        isError,
-        isIdle,
-        isPending,
-        isSuccess,
-        status,
-        failureCount
-    }
-}
+  const utils = trpc.useUtils();
+
+  const {
+    mutateAsync: createFormFieldAsync,
+    mutate: createFormField,
+    error,
+    failureCount,
+    isError,
+    isIdle,
+    isPending,
+    isSuccess,
+    status,
+  } = trpc.form.createFormField.useMutation({
+    onMutate: async (input) => {
+      // Cancel any in-flight refetches for this form's fields
+      await utils.form.listFormFields.cancel({ formId: input.formId });
+      const previous = utils.form.listFormFields.getData({ formId: input.formId });
+
+      // Optimistically add the new field so the canvas updates instantly
+      utils.form.listFormFields.setData({ formId: input.formId }, (old) => {
+        const optimistic = {
+          id: `optimistic-${Date.now()}`,
+          formId: input.formId,
+          label: input.label ?? "",
+          labelKey: input.label?.toLowerCase().replace(/[^a-z0-9]+/g, "-") ?? "field",
+          placeholder: input.placeholder ?? null,
+          isRequired: input.isRequired ?? false,
+          index: String(((old?.length ?? 0) + 1).toFixed(2)),
+          type: input.type,
+          options: input.options ?? null,
+          description: input.description ?? null,
+          // Optimistic baseline — the real version is set when
+          // the server reply lands and the cache is refreshed.
+          version: 0,
+          createdAt: new Date(),
+          updatedAt: new Date(),
+        };
+        return old ? [...old, optimistic] : [optimistic];
+      });
+
+      return { previous, formId: input.formId };
+    },
+    onError: (_err, _input, context) => {
+      if (context?.previous !== undefined) {
+        utils.form.listFormFields.setData({ formId: context.formId }, context.previous);
+      }
+    },
+    onSettled: (_data, _err, input) => {
+      // Only refetch fields for this specific form — not the entire router
+      void utils.form.listFormFields.invalidate({ formId: input.formId });
+    },
+  });
+
+  return {
+    createFormFieldAsync,
+    createFormField,
+    error,
+    isError,
+    isIdle,
+    isPending,
+    isSuccess,
+    status,
+    failureCount,
+  };
+};
 
 export const useUpdateFormField = () => {
-    const utils = trpc.useUtils()
-
-    const {
-        mutateAsync: updateFormFieldAsync,
-        mutate: updateFormField,
-        error,
-        failureCount,
-        isError,
-        isIdle,
-        isPending,
-        isSuccess,
-        status
-    } = trpc.form.updateFormField.useMutation({
-        onSettled: () => {
-            // updateFormField input has no formId, so invalidate all field
-            // queries — still scoped to just fields, not the entire form router
-            void utils.form.listFormFields.invalidate()
-        }
-    })
-
-    return {
-        updateFormFieldAsync,
-        updateFormField,
-        error,
-        isError,
-        isIdle,
-        isPending,
-        isSuccess,
-        status,
-        failureCount
-    }
-}
+  const utils = trpc.useUtils();
+
+  const {
+    mutateAsync: updateFormFieldAsync,
+    mutate: updateFormField,
+    error,
+    failureCount,
+    isError,
+    isIdle,
+    isPending,
+    isSuccess,
+    status,
+  } = trpc.form.updateFormField.useMutation({
+    onSettled: () => {
+      // updateFormField input has no formId, so invalidate all field
+      // queries — still scoped to just fields, not the entire form router
+      void utils.form.listFormFields.invalidate();
+    },
+  });
+
+  return {
+    updateFormFieldAsync,
+    updateFormField,
+    error,
+    isError,
+    isIdle,
+    isPending,
+    isSuccess,
+    status,
+    failureCount,
+  };
+};
 
 export const useDeleteFormField = () => {
-    const utils = trpc.useUtils()
-
-    const {
-        mutateAsync: deleteFormFieldAsync,
-        mutate: deleteFormField,
-        error,
-        failureCount,
-        isError,
-        isIdle,
-        isPending,
-        isSuccess,
-        status
-    } = trpc.form.deleteFormField.useMutation({
-        onSettled: () => {
-            // deleteFormField input doesn't carry formId, so invalidate
-            // all field queries (still much cheaper than invalidating all forms)
-            void utils.form.listFormFields.invalidate()
-        }
-    })
-
-    return {
-        deleteFormFieldAsync,
-        deleteFormField,
-        error,
-        isError,
-        isIdle,
-        isPending,
-        isSuccess,
-        status,
-        failureCount
-    }
-}
+  const utils = trpc.useUtils();
+
+  const {
+    mutateAsync: deleteFormFieldAsync,
+    mutate: deleteFormField,
+    error,
+    failureCount,
+    isError,
+    isIdle,
+    isPending,
+    isSuccess,
+    status,
+  } = trpc.form.deleteFormField.useMutation({
+    onSettled: () => {
+      // deleteFormField input doesn't carry formId, so invalidate
+      // all field queries (still much cheaper than invalidating all forms)
+      void utils.form.listFormFields.invalidate();
+    },
+  });
+
+  return {
+    deleteFormFieldAsync,
+    deleteFormField,
+    error,
+    isError,
+    isIdle,
+    isPending,
+    isSuccess,
+    status,
+    failureCount,
+  };
+};
 
 export const useGetFormField = (id: string) => {
-    const {
-        data: formField,
-        error,
-        failureCount,
-        isError,
-        isSuccess,
-        status,
-        isLoading,
-        refetch
-    } = trpc.form.getFormField.useQuery({ id }, { enabled: !!id && id.length === 36 })
-
-    return {
-        formField,
-        error,
-        isError,
-        isSuccess,
-        status,
-        failureCount,
-        isLoading,
-        refetch
-    }
-}
+  const {
+    data: formField,
+    error,
+    failureCount,
+    isError,
+    isSuccess,
+    status,
+    isLoading,
+    refetch,
+  } = trpc.form.getFormField.useQuery({ id }, { enabled: !!id && id.length === 36 });
+
+  return {
+    formField,
+    error,
+    isError,
+    isSuccess,
+    status,
+    failureCount,
+    isLoading,
+    refetch,
+  };
+};
 
 export const useGetForm = (id: string) => {
-    const {
-        data: form,
-        error,
-        failureCount,
-        isError,
-        isSuccess,
-        status,
-        isLoading,
-        refetch
-    } = trpc.form.getForm.useQuery({ id }, { enabled: !!id && id.length === 36 })
-
-    return {
-        form,
-        error,
-        isError,
-        isSuccess,
-        status,
-        failureCount,
-        isLoading,
-        refetch
-    }
-}
+  const {
+    data: form,
+    error,
+    failureCount,
+    isError,
+    isSuccess,
+    status,
+    isLoading,
+    refetch,
+  } = trpc.form.getForm.useQuery({ id }, { enabled: !!id && id.length === 36 });
+
+  return {
+    form,
+    error,
+    isError,
+    isSuccess,
+    status,
+    failureCount,
+    isLoading,
+    refetch,
+  };
+};
 
 export const useListFormFields = (formId: string) => {
-    const {
-        data: fields,
-        error,
-        failureCount,
-        isError,
-        isSuccess,
-        status,
-        isLoading,
-        refetch
-    } = trpc.form.listFormFields.useQuery({ formId })
-
-    return {
-        fields,
-        error,
-        isError,
-        isSuccess,
-        status,
-        failureCount,
-        isLoading,
-        refetch
-    }
-}
+  const {
+    data: fields,
+    error,
+    failureCount,
+    isError,
+    isSuccess,
+    status,
+    isLoading,
+    refetch,
+  } = trpc.form.listFormFields.useQuery({ formId });
+
+  return {
+    fields,
+    error,
+    isError,
+    isSuccess,
+    status,
+    failureCount,
+    isLoading,
+    refetch,
+  };
+};
 
 export const useGetFormById = (id: string) => {
-    const {
-        data: form,
-        error,
-        failureCount,
-        isError,
-        isSuccess,
-        status,
-        isLoading,
-        refetch
-    } = trpc.form.getFormById.useQuery({ id }, { enabled: !!id && id.length === 36 })
-
-    return {
-        form,
-        error,
-        isError,
-        isSuccess,
-        status,
-        failureCount,
-        isLoading,
-        refetch
-    }
-}
+  const {
+    data: form,
+    error,
+    failureCount,
+    isError,
+    isSuccess,
+    status,
+    isLoading,
+    refetch,
+  } = trpc.form.getFormById.useQuery({ id }, { enabled: !!id && id.length === 36 });
+
+  return {
+    form,
+    error,
+    isError,
+    isSuccess,
+    status,
+    failureCount,
+    isLoading,
+    refetch,
+  };
+};
 
 export const usePublishForm = () => {
-    const utils = trpc.useUtils()
-
-    const {
-        mutateAsync: publishFormAsync,
-        mutate: publishForm,
-        error,
-        failureCount,
-        isError,
-        isIdle,
-        isPending,
-        isSuccess,
-        status
-    } = trpc.form.publishForm.useMutation({
-        onSuccess: async () => {
-            await utils.form.invalidate()
-        }
-    })
-
-    return {
-        publishFormAsync,
-        publishForm,
-        error,
-        isError,
-        isIdle,
-        isPending,
-        isSuccess,
-        status,
-        failureCount
-    }
-}
+  const utils = trpc.useUtils();
+
+  const {
+    mutateAsync: publishFormAsync,
+    mutate: publishForm,
+    error,
+    failureCount,
+    isError,
+    isIdle,
+    isPending,
+    isSuccess,
+    status,
+  } = trpc.form.publishForm.useMutation({
+    onSuccess: async () => {
+      await utils.form.invalidate();
+    },
+  });
+
+  return {
+    publishFormAsync,
+    publishForm,
+    error,
+    isError,
+    isIdle,
+    isPending,
+    isSuccess,
+    status,
+    failureCount,
+  };
+};
 
 export const useSubmitForm = () => {
-    const utils = trpc.useUtils()
-
-    const {
-        mutateAsync: submitFormAsync,
-        mutate: submitForm,
-        error,
-        failureCount,
-        isError,
-        isIdle,
-        isPending,
-        isSuccess,
-        status
-    } = trpc.form.submitForm.useMutation({
-        onSuccess: async () => {
-            await utils.form.invalidate()
-        }
-    })
-
-    return {
-        submitFormAsync,
-        submitForm,
-        error,
-        isError,
-        isIdle,
-        isPending,
-        isSuccess,
-        status,
-        failureCount
-    }
-}
+  const utils = trpc.useUtils();
+
+  const {
+    mutateAsync: submitFormAsync,
+    mutate: submitForm,
+    error,
+    failureCount,
+    isError,
+    isIdle,
+    isPending,
+    isSuccess,
+    status,
+  } = trpc.form.submitForm.useMutation({
+    onSuccess: async () => {
+      await utils.form.invalidate();
+    },
+  });
+
+  return {
+    submitFormAsync,
+    submitForm,
+    error,
+    isError,
+    isIdle,
+    isPending,
+    isSuccess,
+    status,
+    failureCount,
+  };
+};
 
 export const useGetDashboardStats = () => {
-    const {
-        data: stats,
-        error,
-        failureCount,
-        isError,
-        isSuccess,
-        status,
-        isLoading,
-        refetch
-    } = trpc.form.getDashboardStats.useQuery(undefined, {
-        // The dashboard is the landing page after sign-in and on every
-        // back-nav. Treat the result as fresh for 60s and serve from the
-        // query cache so revisits paint instantly. Mutations that affect
-        // these stats (create / delete form, etc.) already invalidate
-        // this key, so stale data can't linger past a write.
-        staleTime: 60_000,
-        // Don't double-fetch when the tab regains focus during normal
-        // use — the dashboard isn't a real-time view.
-        refetchOnWindowFocus: false,
-    })
-
-    return {
-        stats,
-        error,
-        isError,
-        isSuccess,
-        status,
-        failureCount,
-        isLoading,
-        refetch
-    }
-}
-
-
+  const {
+    data: stats,
+    error,
+    failureCount,
+    isError,
+    isSuccess,
+    status,
+    isLoading,
+    refetch,
+  } = trpc.form.getDashboardStats.useQuery(undefined, {
+    // The dashboard is the landing page after sign-in and on every
+    // back-nav. Treat the result as fresh for 60s and serve from the
+    // query cache so revisits paint instantly. Mutations that affect
+    // these stats (create / delete form, etc.) already invalidate
+    // this key, so stale data can't linger past a write.
+    staleTime: 60_000,
+    // Don't double-fetch when the tab regains focus during normal
+    // use — the dashboard isn't a real-time view.
+    refetchOnWindowFocus: false,
+  });
+
+  return {
+    stats,
+    error,
+    isError,
+    isSuccess,
+    status,
+    failureCount,
+    isLoading,
+    refetch,
+  };
+};
 
 export const useDeleteForm = () => {
-    const utils = trpc.useUtils()
-
-    const {
-        mutateAsync: deleteFormAsync,
-        mutate: deleteForm,
-        error,
-        isPending,
-        isSuccess,
-        status
-    } = trpc.form.deleteForm.useMutation({
-        onSuccess: () => {
-            void utils.form.listFormsByUserId.invalidate()
-            void utils.form.getDashboardStats.invalidate()
-        }
-    })
-
-    return {
-        deleteFormAsync,
-        deleteForm,
-        error,
-        isPending,
-        isSuccess,
-        status
-    }
-}
+  const utils = trpc.useUtils();
+
+  const {
+    mutateAsync: deleteFormAsync,
+    mutate: deleteForm,
+    error,
+    isPending,
+    isSuccess,
+    status,
+  } = trpc.form.deleteForm.useMutation({
+    onSuccess: () => {
+      void utils.form.listFormsByUserId.invalidate();
+      void utils.form.getDashboardStats.invalidate();
+    },
+  });
+
+  return {
+    deleteFormAsync,
+    deleteForm,
+    error,
+    isPending,
+    isSuccess,
+    status,
+  };
+};
 
 export const useListCollaborators = (formId: string) => {
-    const {
-        data: collaborators,
-        isLoading,
-        refetch
-    } = trpc.form.listCollaborators.useQuery({ formId }, { enabled: !!formId && formId.length === 36 })
-
-    return {
-        collaborators,
-        isLoading,
-        refetch
-    }
-}
+  const {
+    data: collaborators,
+    isLoading,
+    refetch,
+  } = trpc.form.listCollaborators.useQuery(
+    { formId },
+    { enabled: !!formId && formId.length === 36 },
+  );
+
+  return {
+    collaborators,
+    isLoading,
+    refetch,
+  };
+};
 
 export const useAddCollaborator = () => {
-    const utils = trpc.useUtils()
-    const {
-        mutateAsync: addCollaboratorAsync,
-        isPending,
-        error
-    } = trpc.form.addCollaborator.useMutation({
-        onSuccess: (_data, variables) => {
-            void utils.form.listCollaborators.invalidate({ formId: variables.formId })
-        }
-    })
-
-    return {
-        addCollaboratorAsync,
-        isPending,
-        error
-    }
-}
+  const utils = trpc.useUtils();
+  const {
+    mutateAsync: addCollaboratorAsync,
+    isPending,
+    error,
+  } = trpc.form.addCollaborator.useMutation({
+    onSuccess: (_data, variables) => {
+      void utils.form.listCollaborators.invalidate({ formId: variables.formId });
+    },
+  });
+
+  return {
+    addCollaboratorAsync,
+    isPending,
+    error,
+  };
+};
 
 export const useUpdateCollaboratorRole = () => {
-    const utils = trpc.useUtils()
-    const {
-        mutateAsync: updateCollaboratorRoleAsync,
-        isPending,
-        error
-    } = trpc.form.updateCollaboratorRole.useMutation({
-        onSuccess: (_data, variables) => {
-            void utils.form.listCollaborators.invalidate({ formId: variables.formId })
-        }
-    })
-
-    return {
-        updateCollaboratorRoleAsync,
-        isPending,
-        error
-    }
-}
+  const utils = trpc.useUtils();
+  const {
+    mutateAsync: updateCollaboratorRoleAsync,
+    isPending,
+    error,
+  } = trpc.form.updateCollaboratorRole.useMutation({
+    onSuccess: (_data, variables) => {
+      void utils.form.listCollaborators.invalidate({ formId: variables.formId });
+    },
+  });
+
+  return {
+    updateCollaboratorRoleAsync,
+    isPending,
+    error,
+  };
+};
 
 export const useRemoveCollaborator = () => {
-    const utils = trpc.useUtils()
-    const {
-        mutateAsync: removeCollaboratorAsync,
-        isPending,
-        error
-    } = trpc.form.removeCollaborator.useMutation({
-        onSuccess: (_data, variables) => {
-            void utils.form.listCollaborators.invalidate({ formId: variables.formId })
-        }
-    })
-
-    return {
-        removeCollaboratorAsync,
-        isPending,
-        error
-    }
-}
+  const utils = trpc.useUtils();
+  const {
+    mutateAsync: removeCollaboratorAsync,
+    isPending,
+    error,
+  } = trpc.form.removeCollaborator.useMutation({
+    onSuccess: (_data, variables) => {
+      void utils.form.listCollaborators.invalidate({ formId: variables.formId });
+    },
+  });
+
+  return {
+    removeCollaboratorAsync,
+    isPending,
+    error,
+  };
+};
 
 export const useTransferOwnership = () => {
-    const utils = trpc.useUtils()
-    const {
-        mutateAsync: transferOwnershipAsync,
-        isPending,
-        error
-    } = trpc.form.transferOwnership.useMutation({
-        onSuccess: (_data, variables) => {
-            void utils.form.listCollaborators.invalidate({ formId: variables.formId })
-            void utils.form.getForm.invalidate({ id: variables.formId })
-            void utils.form.listFormsByUserId.invalidate()
-        }
-    })
-
-    return {
-        transferOwnershipAsync,
-        isPending,
-        error
-    }
-}
-
+  const utils = trpc.useUtils();
+  const {
+    mutateAsync: transferOwnershipAsync,
+    isPending,
+    error,
+  } = trpc.form.transferOwnership.useMutation({
+    onSuccess: (_data, variables) => {
+      void utils.form.listCollaborators.invalidate({ formId: variables.formId });
+      void utils.form.getForm.invalidate({ id: variables.formId });
+      void utils.form.listFormsByUserId.invalidate();
+    },
+  });
+
+  return {
+    transferOwnershipAsync,
+    isPending,
+    error,
+  };
+};
+
+export const useUpdateFormSettings = () => {
+  const utils = trpc.useUtils();
+  const {
+    mutateAsync: updateFormSettingsAsync,
+    isPending,
+    error,
+  } = trpc.form.updateFormSettings.useMutation({
+    onSuccess: (_data, variables) => {
+      void utils.form.getForm.invalidate({ id: variables.id });
+      void utils.form.getFormById.invalidate({ id: variables.id });
+      void utils.form.listFormsByUserId.invalidate();
+    },
+  });
+
+  return {
+    updateFormSettingsAsync,
+    isPending,
+    error,
+  };
+};
diff --git a/apps/web/hooks/api/user/index.ts b/apps/web/hooks/api/user/index.ts
index 22c2821..48cd0b4 100644
--- a/apps/web/hooks/api/user/index.ts
+++ b/apps/web/hooks/api/user/index.ts
@@ -1,25 +1,46 @@
-import { trpc } from "~/trpc/client"
+import { trpc } from "~/trpc/client";
 
-export type UserPlan = "Free" | "Pro" | "Pro+" | "Business"
+export type UserPlan = "Free" | "Pro" | "Pro+" | "Business";
 
 /**
  * Fetches the current user's profile including their subscription plan.
  * Use this to gate Pro+/Business features on the frontend.
  */
 export const useGetMe = () => {
-    const { data, isLoading, error } = trpc.user.getMe.useQuery(undefined, {
-        staleTime: 5 * 60 * 1000, // 5 min — plan rarely changes
-        retry: false,
-    })
+  const { data, isLoading, error } = trpc.user.getMe.useQuery(undefined, {
+    staleTime: 5 * 60 * 1000, // 5 min — plan rarely changes
+    retry: false,
+  });
 
-    const plan: UserPlan = data?.plan ?? "Free"
-    const hasDetailedAnalytics = plan === "Pro+" || plan === "Business"
+  const plan: UserPlan = data?.plan ?? "Free";
+  const hasDetailedAnalytics = plan === "Pro+" || plan === "Business";
 
-    return {
-        me: data,
-        plan,
-        hasDetailedAnalytics,
-        isLoading,
-        error,
-    }
-}
+  return {
+    me: data,
+    plan,
+    hasDetailedAnalytics,
+    isLoading,
+    error,
+  };
+};
+
+export const useSearchUsers = (query: string) => {
+  const trimmedQuery = query.trim();
+  const {
+    data: users,
+    isLoading,
+    error,
+  } = trpc.user.searchUsers.useQuery(
+    { query: trimmedQuery },
+    {
+      enabled: trimmedQuery.length >= 2,
+      staleTime: 30 * 1000,
+    },
+  );
+
+  return {
+    users: trimmedQuery.length >= 2 ? (users ?? []) : [],
+    isLoading: trimmedQuery.length >= 2 && isLoading,
+    error,
+  };
+};
diff --git a/apps/web/hooks/use-mobile.ts b/apps/web/hooks/use-mobile.ts
index 2b0fe1d..502fd32 100644
--- a/apps/web/hooks/use-mobile.ts
+++ b/apps/web/hooks/use-mobile.ts
@@ -1,19 +1,19 @@
-import * as React from "react"
+import * as React from "react";
 
-const MOBILE_BREAKPOINT = 768
+const MOBILE_BREAKPOINT = 768;
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
 
   React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    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)
-  }, [])
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
 
-  return !!isMobile
+  return !!isMobile;
 }
diff --git a/apps/web/hooks/useDebounce.ts b/apps/web/hooks/useDebounce.ts
index 631ee56..aa9ab2c 100644
--- a/apps/web/hooks/useDebounce.ts
+++ b/apps/web/hooks/useDebounce.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react";
 
 /**
  * Returns a value that updates only after `delay` ms have passed without
@@ -12,14 +12,14 @@ import { useEffect, useRef, useState } from "react"
  *   // expensive operation reads `debouncedQuery`, controlled input reads `query`
  */
 export function useDebounce<T>(value: T, delay = 200): T {
-    const [debounced, setDebounced] = useState(value)
+  const [debounced, setDebounced] = useState(value);
 
-    useEffect(() => {
-        const handle = window.setTimeout(() => setDebounced(value), delay)
-        return () => window.clearTimeout(handle)
-    }, [value, delay])
+  useEffect(() => {
+    const handle = window.setTimeout(() => setDebounced(value), delay);
+    return () => window.clearTimeout(handle);
+  }, [value, delay]);
 
-    return debounced
+  return debounced;
 }
 
 /**
@@ -31,28 +31,28 @@ export function useDebounce<T>(value: T, delay = 200): T {
  * after the component goes away.
  */
 export function useDebouncedCallback<TArgs extends unknown[]>(
-    callback: (...args: TArgs) => void,
-    delay = 200
+  callback: (...args: TArgs) => void,
+  delay = 200,
 ): (...args: TArgs) => void {
-    const callbackRef = useRef(callback)
-    const timerRef = useRef<number | null>(null)
+  const callbackRef = useRef(callback);
+  const timerRef = useRef<number | null>(null);
 
-    // Always invoke the latest version of the callback without forcing
-    // consumers to memo it.
-    useEffect(() => {
-        callbackRef.current = callback
-    }, [callback])
+  // Always invoke the latest version of the callback without forcing
+  // consumers to memo it.
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
 
-    useEffect(() => {
-        return () => {
-            if (timerRef.current !== null) window.clearTimeout(timerRef.current)
-        }
-    }, [])
+  useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+    };
+  }, []);
 
-    return (...args: TArgs) => {
-        if (timerRef.current !== null) window.clearTimeout(timerRef.current)
-        timerRef.current = window.setTimeout(() => {
-            callbackRef.current(...args)
-        }, delay)
-    }
+  return (...args: TArgs) => {
+    if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(() => {
+      callbackRef.current(...args);
+    }, delay);
+  };
 }
diff --git a/apps/web/lib/auth-client.ts b/apps/web/lib/auth-client.ts
index 046b01f..69fdc79 100644
--- a/apps/web/lib/auth-client.ts
+++ b/apps/web/lib/auth-client.ts
@@ -9,6 +9,6 @@ if (baseURL.endsWith("/trpc")) {
 export const authClient = createAuthClient({
   baseURL: baseURL + "/api/auth",
   fetchOptions: {
-    credentials: "include"
-  }
+    credentials: "include",
+  },
 });
diff --git a/apps/web/lib/utils.ts b/apps/web/lib/utils.ts
index bd0c391..a5ef193 100644
--- a/apps/web/lib/utils.ts
+++ b/apps/web/lib/utils.ts
@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts
index d82c395..9bb3825 100644
--- a/apps/web/middleware.ts
+++ b/apps/web/middleware.ts
@@ -2,9 +2,10 @@ import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 
 export function middleware(request: NextRequest) {
-  const token = request.cookies.get("cf_session")?.value ||
-                request.cookies.get("better-auth.session_token")?.value || 
-                request.cookies.get("__Secure-better-auth.session_token")?.value;
+  const token =
+    request.cookies.get("cf_session")?.value ||
+    request.cookies.get("better-auth.session_token")?.value ||
+    request.cookies.get("__Secure-better-auth.session_token")?.value;
   const { pathname } = request.nextUrl;
 
   if (token && (pathname === "/signIn" || pathname === "/signUp")) {
diff --git a/apps/web/providers/dashboard-provider.tsx b/apps/web/providers/dashboard-provider.tsx
index be76696..7c677cd 100644
--- a/apps/web/providers/dashboard-provider.tsx
+++ b/apps/web/providers/dashboard-provider.tsx
@@ -10,18 +10,14 @@ interface DashboardContextType {
 
 const DashboardContext = createContext<DashboardContextType | null>(null);
 
-export const DashboardProvider = ({ 
-  children, 
-  value 
-}: { 
-  children: React.ReactNode; 
-  value: DashboardContextType; 
+export const DashboardProvider = ({
+  children,
+  value,
+}: {
+  children: React.ReactNode;
+  value: DashboardContextType;
 }) => {
-  return (
-    <DashboardContext.Provider value={value}>
-      {children}
-    </DashboardContext.Provider>
-  );
+  return <DashboardContext.Provider value={value}>{children}</DashboardContext.Provider>;
 };
 
 export const useDashboard = () => {
diff --git a/apps/web/trpc/create-client.ts b/apps/web/trpc/create-client.ts
index 03d987f..44f485f 100644
--- a/apps/web/trpc/create-client.ts
+++ b/apps/web/trpc/create-client.ts
@@ -7,7 +7,7 @@ interface CreateTRPCHttpBatchClientClientOpts {
 
 export const createTRPCHttpBatchClientClient = (opts?: CreateTRPCHttpBatchClientClientOpts) => {
   const c = opts?.enableStreaming ? httpBatchStreamLink : httpLink;
-  
+
   let url = env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000/trpc";
   if (url && !url.endsWith("/trpc")) {
     url = `${url.replace(/\/$/, "")}/trpc`;
diff --git a/packages/database/drizzle/0010_fine_the_spike.sql b/packages/database/drizzle/0010_fine_the_spike.sql
new file mode 100644
index 0000000..f450528
--- /dev/null
+++ b/packages/database/drizzle/0010_fine_the_spike.sql
@@ -0,0 +1,2 @@
+ALTER TABLE "forms" ADD COLUMN "max_submissions" integer;--> statement-breakpoint
+ALTER TABLE "forms" ADD COLUMN "expires_at" timestamp;
\ No newline at end of file
diff --git a/packages/database/drizzle/meta/0010_snapshot.json b/packages/database/drizzle/meta/0010_snapshot.json
new file mode 100644
index 0000000..f9dc64f
--- /dev/null
+++ b/packages/database/drizzle/meta/0010_snapshot.json
@@ -0,0 +1,1281 @@
+{
+  "id": "ed9b556e-e9d2-454e-b052-b7925c44e7d7",
+  "prevId": "8c623849-b137-4624-9699-4ba38e7ffe8f",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.account": {
+      "name": "account",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "account_id": {
+          "name": "account_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "provider_id": {
+          "name": "provider_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "access_token_expires_at": {
+          "name": "access_token_expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "refresh_token_expires_at": {
+          "name": "refresh_token_expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "account_user_id_idx": {
+          "name": "account_user_id_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "account_user_id_users_id_fk": {
+          "name": "account_user_id_users_id_fk",
+          "tableFrom": "account",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.sessions": {
+      "name": "sessions",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "ip_address": {
+          "name": "ip_address",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "user_agent": {
+          "name": "user_agent",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "sessions_user_id_idx": {
+          "name": "sessions_user_id_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "sessions_expires_at_idx": {
+          "name": "sessions_expires_at_idx",
+          "columns": [
+            {
+              "expression": "expires_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "sessions_user_id_users_id_fk": {
+          "name": "sessions_user_id_users_id_fk",
+          "tableFrom": "sessions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "sessions_token_unique": {
+          "name": "sessions_token_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "token"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.users": {
+      "name": "users",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "''"
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "email_verified": {
+          "name": "email_verified",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "plan": {
+          "name": "plan",
+          "type": "subscription_type",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'Free'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "email"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.verification": {
+      "name": "verification",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "identifier": {
+          "name": "identifier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.forms": {
+      "name": "forms",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "title": {
+          "name": "title",
+          "type": "varchar(150)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "varchar(150)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "is_published": {
+          "name": "is_published",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "is_archived": {
+          "name": "is_archived",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "is_open": {
+          "name": "is_open",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        },
+        "max_submissions": {
+          "name": "max_submissions",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "version": {
+          "name": "version",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "published_at": {
+          "name": "published_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {
+        "forms_owner_created_idx": {
+          "name": "forms_owner_created_idx",
+          "columns": [
+            {
+              "expression": "owner_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "created_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "forms_owner_id_users_id_fk": {
+          "name": "forms_owner_id_users_id_fk",
+          "tableFrom": "forms",
+          "tableTo": "users",
+          "columnsFrom": [
+            "owner_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "forms_slug_unique": {
+          "name": "forms_slug_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "slug"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.form_fields": {
+      "name": "form_fields",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "form_id": {
+          "name": "form_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "label": {
+          "name": "label",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "label_key": {
+          "name": "label_key",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "placeholder": {
+          "name": "placeholder",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "is_required": {
+          "name": "is_required",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "index": {
+          "name": "index",
+          "type": "numeric",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "type": {
+          "name": "type",
+          "type": "field_type_num",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "options": {
+          "name": "options",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "version": {
+          "name": "version",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "form_fields_form_idx": {
+          "name": "form_fields_form_idx",
+          "columns": [
+            {
+              "expression": "form_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "form_fields_form_id_forms_id_fk": {
+          "name": "form_fields_form_id_forms_id_fk",
+          "tableFrom": "form_fields",
+          "tableTo": "forms",
+          "columnsFrom": [
+            "form_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "form_fields_form_id_index_unique": {
+          "name": "form_fields_form_id_index_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "form_id",
+            "index"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.form_submissions": {
+      "name": "form_submissions",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "form_id": {
+          "name": "form_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "values": {
+          "name": "values",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "idempotency_key": {
+          "name": "idempotency_key",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "visitor_id": {
+          "name": "visitor_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "referrer": {
+          "name": "referrer",
+          "type": "varchar(2048)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "utm_source": {
+          "name": "utm_source",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "utm_medium": {
+          "name": "utm_medium",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "utm_campaign": {
+          "name": "utm_campaign",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "time_spent_ms": {
+          "name": "time_spent_ms",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "form_submissions_form_created_idx": {
+          "name": "form_submissions_form_created_idx",
+          "columns": [
+            {
+              "expression": "form_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "created_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "form_submissions_form_idempotency_idx": {
+          "name": "form_submissions_form_idempotency_idx",
+          "columns": [
+            {
+              "expression": "form_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "idempotency_key",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "where": "\"form_submissions\".\"idempotency_key\" IS NOT NULL",
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "form_submissions_form_visitor_idx": {
+          "name": "form_submissions_form_visitor_idx",
+          "columns": [
+            {
+              "expression": "form_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "visitor_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "where": "\"form_submissions\".\"visitor_id\" IS NOT NULL",
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "form_submissions_form_id_forms_id_fk": {
+          "name": "form_submissions_form_id_forms_id_fk",
+          "tableFrom": "form_submissions",
+          "tableTo": "forms",
+          "columnsFrom": [
+            "form_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.form_views": {
+      "name": "form_views",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "form_id": {
+          "name": "form_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "visitor_id": {
+          "name": "visitor_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "device_type": {
+          "name": "device_type",
+          "type": "varchar(50)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "referrer": {
+          "name": "referrer",
+          "type": "varchar(2048)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "utm_source": {
+          "name": "utm_source",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "utm_medium": {
+          "name": "utm_medium",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "utm_campaign": {
+          "name": "utm_campaign",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "form_views_form_id_idx": {
+          "name": "form_views_form_id_idx",
+          "columns": [
+            {
+              "expression": "form_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "form_views_form_created_idx": {
+          "name": "form_views_form_created_idx",
+          "columns": [
+            {
+              "expression": "form_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "created_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "form_views_form_visitor_created_idx": {
+          "name": "form_views_form_visitor_created_idx",
+          "columns": [
+            {
+              "expression": "form_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "visitor_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "created_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "form_views_form_id_forms_id_fk": {
+          "name": "form_views_form_id_forms_id_fk",
+          "tableFrom": "form_views",
+          "tableTo": "forms",
+          "columnsFrom": [
+            "form_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.form_field_views": {
+      "name": "form_field_views",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "form_id": {
+          "name": "form_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "field_id": {
+          "name": "field_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "form_field_views_form_field_idx": {
+          "name": "form_field_views_form_field_idx",
+          "columns": [
+            {
+              "expression": "form_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "field_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "form_field_views_created_idx": {
+          "name": "form_field_views_created_idx",
+          "columns": [
+            {
+              "expression": "form_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "created_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "form_field_views_form_id_forms_id_fk": {
+          "name": "form_field_views_form_id_forms_id_fk",
+          "tableFrom": "form_field_views",
+          "tableTo": "forms",
+          "columnsFrom": [
+            "form_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "form_field_views_field_id_form_fields_id_fk": {
+          "name": "form_field_views_field_id_form_fields_id_fk",
+          "tableFrom": "form_field_views",
+          "tableTo": "form_fields",
+          "columnsFrom": [
+            "field_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.form_collaborators": {
+      "name": "form_collaborators",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "form_id": {
+          "name": "form_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "role": {
+          "name": "role",
+          "type": "collaborator_role",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "added_by": {
+          "name": "added_by",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "form_collaborators_form_idx": {
+          "name": "form_collaborators_form_idx",
+          "columns": [
+            {
+              "expression": "form_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "form_collaborators_user_idx": {
+          "name": "form_collaborators_user_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "form_collaborators_form_user_uniq_idx": {
+          "name": "form_collaborators_form_user_uniq_idx",
+          "columns": [
+            {
+              "expression": "form_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "form_collaborators_form_id_forms_id_fk": {
+          "name": "form_collaborators_form_id_forms_id_fk",
+          "tableFrom": "form_collaborators",
+          "tableTo": "forms",
+          "columnsFrom": [
+            "form_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "form_collaborators_user_id_users_id_fk": {
+          "name": "form_collaborators_user_id_users_id_fk",
+          "tableFrom": "form_collaborators",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "form_collaborators_added_by_users_id_fk": {
+          "name": "form_collaborators_added_by_users_id_fk",
+          "tableFrom": "form_collaborators",
+          "tableTo": "users",
+          "columnsFrom": [
+            "added_by"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {
+    "public.subscription_type": {
+      "name": "subscription_type",
+      "schema": "public",
+      "values": [
+        "Free",
+        "Pro",
+        "Pro+",
+        "Business"
+      ]
+    },
+    "public.field_type_num": {
+      "name": "field_type_num",
+      "schema": "public",
+      "values": [
+        "TEXT",
+        "TEXTAREA",
+        "NUMBER",
+        "EMAIL",
+        "PHONE",
+        "URL",
+        "SELECT",
+        "RADIO",
+        "CHECKBOX",
+        "DATE",
+        "RATING",
+        "FILE_UPLOAD",
+        "TIME",
+        "DATETIME",
+        "SLIDER",
+        "TOGGLE"
+      ]
+    },
+    "public.collaborator_role": {
+      "name": "collaborator_role",
+      "schema": "public",
+      "values": [
+        "viewer",
+        "editor"
+      ]
+    }
+  },
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}
\ No newline at end of file
diff --git a/packages/database/drizzle/meta/_journal.json b/packages/database/drizzle/meta/_journal.json
index ba04f29..a578c71 100644
--- a/packages/database/drizzle/meta/_journal.json
+++ b/packages/database/drizzle/meta/_journal.json
@@ -71,6 +71,13 @@
       "when": 1783961515151,
       "tag": "0009_material_gabe_jones",
       "breakpoints": true
+    },
+    {
+      "idx": 10,
+      "version": "7",
+      "when": 1784022259464,
+      "tag": "0010_fine_the_spike",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/packages/database/index.ts b/packages/database/index.ts
index 07c44a8..1c130eb 100644
--- a/packages/database/index.ts
+++ b/packages/database/index.ts
@@ -48,10 +48,8 @@ pool.on("error", (err) => {
 // concurrent queries (e.g. the dashboard fires 4 queries in parallel)
 // doesn't pay 4 sequential TLS handshakes to Neon. We don't try to fill
 // the whole pool — just enough for the typical first request.
-const WARM_CONNECTIONS = 4
-Promise.all(
-  Array.from({ length: WARM_CONNECTIONS }, () => pool.connect()),
-)
+const WARM_CONNECTIONS = 4;
+Promise.all(Array.from({ length: WARM_CONNECTIONS }, () => pool.connect()))
   .then((clients) => clients.forEach((c) => c.release()))
   .catch(() => {
     /* swallow — the next real query will surface the error normally. */
diff --git a/packages/database/models/auth.ts b/packages/database/models/auth.ts
index b110d9b..e337d68 100644
--- a/packages/database/models/auth.ts
+++ b/packages/database/models/auth.ts
@@ -1,14 +1,11 @@
-import {
-  pgTable,
-  varchar,
-  timestamp,
-  boolean,
-  text,
-  pgEnum,
-  index,
-} from "drizzle-orm/pg-core";
+import { pgTable, varchar, timestamp, boolean, text, pgEnum, index } from "drizzle-orm/pg-core";
 
-export const subscriptionTypeEnum = pgEnum("subscription_type", ["Free", "Pro", "Pro+", "Business"]);
+export const subscriptionTypeEnum = pgEnum("subscription_type", [
+  "Free",
+  "Pro",
+  "Pro+",
+  "Business",
+]);
 
 export const usersTable = pgTable("users", {
   id: text("id").primaryKey(),
@@ -19,43 +16,57 @@ export const usersTable = pgTable("users", {
   image: text("image"),
   plan: subscriptionTypeEnum("plan").notNull().default("Free"),
   createdAt: timestamp("created_at").defaultNow().notNull(),
-  updatedAt: timestamp("updated_at").defaultNow().$onUpdate(() => new Date()).notNull(),
+  updatedAt: timestamp("updated_at")
+    .defaultNow()
+    .$onUpdate(() => new Date())
+    .notNull(),
 });
 
-export const sessionsTable = pgTable("sessions", {
-  id: text("id").primaryKey(),
-  expiresAt: timestamp("expires_at").notNull(),
-  token: text("token").notNull().unique(),
-  createdAt: timestamp("created_at").defaultNow().notNull(),
-  updatedAt: timestamp("updated_at").defaultNow().notNull(),
-  ipAddress: text("ip_address"),
-  userAgent: text("user_agent"),
-  userId: text("user_id").notNull().references(() => usersTable.id, { onDelete: "cascade" }),
-}, (table) => ({
-  // FK lookups (`SELECT * FROM sessions WHERE user_id = $1`) ran without
-  // an index until now. Frequently hit on every authenticated request.
-  userIdx: index("sessions_user_id_idx").on(table.userId),
-  expiresIdx: index("sessions_expires_at_idx").on(table.expiresAt),
-}));
+export const sessionsTable = pgTable(
+  "sessions",
+  {
+    id: text("id").primaryKey(),
+    expiresAt: timestamp("expires_at").notNull(),
+    token: text("token").notNull().unique(),
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+    updatedAt: timestamp("updated_at").defaultNow().notNull(),
+    ipAddress: text("ip_address"),
+    userAgent: text("user_agent"),
+    userId: text("user_id")
+      .notNull()
+      .references(() => usersTable.id, { onDelete: "cascade" }),
+  },
+  (table) => ({
+    // FK lookups (`SELECT * FROM sessions WHERE user_id = $1`) ran without
+    // an index until now. Frequently hit on every authenticated request.
+    userIdx: index("sessions_user_id_idx").on(table.userId),
+    expiresIdx: index("sessions_expires_at_idx").on(table.expiresAt),
+  }),
+);
 
-
-export const accountsTable = pgTable("account", {
-	id: text("id").primaryKey(),
-	userId: text("user_id").notNull().references(() => usersTable.id, { onDelete: "cascade" }),
-	accountId: text("account_id").notNull(),
-	providerId: text("provider_id").notNull(),
-	accessToken: text("access_token"),
-	refreshToken: text("refresh_token"),
-	accessTokenExpiresAt: timestamp("access_token_expires_at"),
-	refreshTokenExpiresAt: timestamp("refresh_token_expires_at"),
-	scope: text("scope"),
-	idToken: text("id_token"),
-	password: text("password"),
-	createdAt: timestamp("created_at").defaultNow().notNull(),
-	updatedAt: timestamp("updated_at").defaultNow().notNull(),
-}, (table) => ({
-  userIdx: index("account_user_id_idx").on(table.userId),
-}));
+export const accountsTable = pgTable(
+  "account",
+  {
+    id: text("id").primaryKey(),
+    userId: text("user_id")
+      .notNull()
+      .references(() => usersTable.id, { onDelete: "cascade" }),
+    accountId: text("account_id").notNull(),
+    providerId: text("provider_id").notNull(),
+    accessToken: text("access_token"),
+    refreshToken: text("refresh_token"),
+    accessTokenExpiresAt: timestamp("access_token_expires_at"),
+    refreshTokenExpiresAt: timestamp("refresh_token_expires_at"),
+    scope: text("scope"),
+    idToken: text("id_token"),
+    password: text("password"),
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+    updatedAt: timestamp("updated_at").defaultNow().notNull(),
+  },
+  (table) => ({
+    userIdx: index("account_user_id_idx").on(table.userId),
+  }),
+);
 
 export const verificationsTable = pgTable("verification", {
   id: text("id").primaryKey(),
@@ -68,4 +79,3 @@ export const verificationsTable = pgTable("verification", {
 
 export type SelectUser = typeof usersTable.$inferSelect;
 export type InsertUser = typeof usersTable.$inferInsert;
-
diff --git a/packages/database/models/form-collaborator.ts b/packages/database/models/form-collaborator.ts
index 13c73cc..deff1a7 100644
--- a/packages/database/models/form-collaborator.ts
+++ b/packages/database/models/form-collaborator.ts
@@ -1,19 +1,42 @@
-import { pgTable, uuid, varchar, timestamp, text, index, uniqueIndex, pgEnum } from 'drizzle-orm/pg-core'
-import { formsTable } from './form'
-import { usersTable } from './auth'
+import {
+  pgTable,
+  uuid,
+  varchar,
+  timestamp,
+  text,
+  index,
+  uniqueIndex,
+  pgEnum,
+} from "drizzle-orm/pg-core";
+import { formsTable } from "./form";
+import { usersTable } from "./auth";
 
-export const collaboratorRoleEnum = pgEnum("collaborator_role", ["viewer", "editor"])
+export const collaboratorRoleEnum = pgEnum("collaborator_role", ["viewer", "editor"]);
 
-export const formCollaboratorsTable = pgTable("form_collaborators", {
+export const formCollaboratorsTable = pgTable(
+  "form_collaborators",
+  {
     id: uuid("id").defaultRandom().primaryKey(),
-    formId: uuid("form_id").references(() => formsTable.id, { onDelete: "cascade" }).notNull(),
-    userId: text("user_id").references(() => usersTable.id, { onDelete: "cascade" }).notNull(),
+    formId: uuid("form_id")
+      .references(() => formsTable.id, { onDelete: "cascade" })
+      .notNull(),
+    userId: text("user_id")
+      .references(() => usersTable.id, { onDelete: "cascade" })
+      .notNull(),
     role: collaboratorRoleEnum("role").notNull(),
     addedBy: text("added_by").references(() => usersTable.id, { onDelete: "set null" }),
     createdAt: timestamp("created_at").defaultNow().notNull(),
-    updatedAt: timestamp("updated_at").defaultNow().$onUpdate(() => new Date()).notNull(),
-}, (table) => ({
+    updatedAt: timestamp("updated_at")
+      .defaultNow()
+      .$onUpdate(() => new Date())
+      .notNull(),
+  },
+  (table) => ({
     formIdx: index("form_collaborators_form_idx").on(table.formId),
     userIdx: index("form_collaborators_user_idx").on(table.userId),
-    formUserUniqIdx: uniqueIndex("form_collaborators_form_user_uniq_idx").on(table.formId, table.userId),
-}))
+    formUserUniqIdx: uniqueIndex("form_collaborators_form_user_uniq_idx").on(
+      table.formId,
+      table.userId,
+    ),
+  }),
+);
diff --git a/packages/database/models/form-field-view.ts b/packages/database/models/form-field-view.ts
index 50bf64d..92ad510 100644
--- a/packages/database/models/form-field-view.ts
+++ b/packages/database/models/form-field-view.ts
@@ -1,6 +1,6 @@
-import { index, jsonb, pgTable, uuid, timestamp } from 'drizzle-orm/pg-core'
-import { formsTable } from './form'
-import { formFieldsTable } from './form-field'
+import { index, jsonb, pgTable, uuid, timestamp } from "drizzle-orm/pg-core";
+import { formsTable } from "./form";
+import { formFieldsTable } from "./form-field";
 
 /**
  * Tracks each time a visitor answers a field and clicks Next on the public form.
@@ -8,14 +8,22 @@ import { formFieldsTable } from './form-field'
  * and question distribution data (partial fills, not just completed submissions).
  * No auth required; inserted by the public form page.
  */
-export const formFieldViewsTable = pgTable("form_field_views", {
+export const formFieldViewsTable = pgTable(
+  "form_field_views",
+  {
     id: uuid("id").primaryKey().defaultRandom(),
-    formId: uuid('form_id').references(() => formsTable.id, { onDelete: "cascade" }).notNull(),
-    fieldId: uuid('field_id').references(() => formFieldsTable.id, { onDelete: "cascade" }).notNull(),
+    formId: uuid("form_id")
+      .references(() => formsTable.id, { onDelete: "cascade" })
+      .notNull(),
+    fieldId: uuid("field_id")
+      .references(() => formFieldsTable.id, { onDelete: "cascade" })
+      .notNull(),
     // The actual answer value the visitor entered before clicking Next
-    value: jsonb('value'),
-    createdAt: timestamp('created_at').defaultNow().notNull(),
-}, (table) => ({
+    value: jsonb("value"),
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+  },
+  (table) => ({
     formFieldIdx: index("form_field_views_form_field_idx").on(table.formId, table.fieldId),
     formCreatedIdx: index("form_field_views_created_idx").on(table.formId, table.createdAt),
-}))
+  }),
+);
diff --git a/packages/database/models/form-field.ts b/packages/database/models/form-field.ts
index 2915938..78ccc77 100644
--- a/packages/database/models/form-field.ts
+++ b/packages/database/models/form-field.ts
@@ -1,47 +1,49 @@
 import {
-    pgTable,
-    uuid,
-    varchar,
-    boolean,
-    timestamp,
-    text,
-    jsonb,
-    integer,
-    serial,
-    numeric,
-    pgEnum,
-    unique,
-    index
-} from "drizzle-orm/pg-core"
-import { usersTable } from "./auth"
-import { formsTable } from "./form"
+  pgTable,
+  uuid,
+  varchar,
+  boolean,
+  timestamp,
+  text,
+  jsonb,
+  integer,
+  serial,
+  numeric,
+  pgEnum,
+  unique,
+  index,
+} from "drizzle-orm/pg-core";
+import { usersTable } from "./auth";
+import { formsTable } from "./form";
 
+export const fieldTypeEnum = pgEnum("field_type_num", [
+  "TEXT",
+  "TEXTAREA",
+  "NUMBER",
+  "EMAIL",
+  "PHONE",
+  "URL",
+  "SELECT",
+  "RADIO",
+  "CHECKBOX",
+  "DATE",
+  "RATING",
+  "FILE_UPLOAD",
+  "TIME",
+  "DATETIME",
+  "SLIDER",
+  "TOGGLE",
+]);
 
-export const fieldTypeEnum = pgEnum('field_type_num', [
-    'TEXT',
-    'TEXTAREA',
-    'NUMBER',
-    'EMAIL',
-    'PHONE',
-    'URL',
-    'SELECT',
-    'RADIO',
-    'CHECKBOX',
-    'DATE',
-    'RATING',
-    'FILE_UPLOAD',
-    'TIME',
-    'DATETIME',
-    'SLIDER',
-    'TOGGLE'
-])
-
-
-export const formFieldsTable = pgTable("form_fields", {
+export const formFieldsTable = pgTable(
+  "form_fields",
+  {
     id: uuid("id").defaultRandom().primaryKey(),
-    formId: uuid("form_id").references(() => formsTable.id, {
-        onDelete: "cascade"
-    }).notNull(),
+    formId: uuid("form_id")
+      .references(() => formsTable.id, {
+        onDelete: "cascade",
+      })
+      .notNull(),
 
     label: varchar("label", { length: 255 }).notNull(),
     labelKey: varchar("label_key", { length: 255 }).notNull(),
@@ -52,7 +54,7 @@ export const formFieldsTable = pgTable("form_fields", {
 
     index: numeric("index", { scale: 2 }).notNull(),
 
-    type: fieldTypeEnum('type').notNull(),
+    type: fieldTypeEnum("type").notNull(),
 
     options: jsonb("options"),
 
@@ -62,12 +64,16 @@ export const formFieldsTable = pgTable("form_fields", {
     version: integer("version").notNull().default(0),
 
     createdAt: timestamp("created_at").defaultNow().notNull(),
-    updatedAt: timestamp("updated_at").defaultNow().$onUpdate(() => new Date()).notNull(),
-
-}, (table) => {
+    updatedAt: timestamp("updated_at")
+      .defaultNow()
+      .$onUpdate(() => new Date())
+      .notNull(),
+  },
+  (table) => {
     return {
-        uniqueFormIdAndIndex: unique().on(table.formId, table.index),
-        // Hot path for listing a form's fields ordered by index
-        formIdx: index("form_fields_form_idx").on(table.formId),
-    }
-})
\ No newline at end of file
+      uniqueFormIdAndIndex: unique().on(table.formId, table.index),
+      // Hot path for listing a form's fields ordered by index
+      formIdx: index("form_fields_form_idx").on(table.formId),
+    };
+  },
+);
diff --git a/packages/database/models/form-submission.ts b/packages/database/models/form-submission.ts
index 14ea0cf..e7ee968 100644
--- a/packages/database/models/form-submission.ts
+++ b/packages/database/models/form-submission.ts
@@ -1,20 +1,34 @@
-import { index, integer, jsonb, pgTable, text, timestamp, uniqueIndex, uuid, varchar } from 'drizzle-orm/pg-core'
-import { sql } from 'drizzle-orm'
-import { formsTable } from './form'
+import {
+  index,
+  integer,
+  jsonb,
+  pgTable,
+  text,
+  timestamp,
+  uniqueIndex,
+  uuid,
+  varchar,
+} from "drizzle-orm/pg-core";
+import { sql } from "drizzle-orm";
+import { formsTable } from "./form";
 
 export interface FormSubmissionValue {
-    formFieldId: string
-    value: any
+  formFieldId: string;
+  value: any;
 }
 
-export type FormSubmissionValueRow = FormSubmissionValue[]
+export type FormSubmissionValueRow = FormSubmissionValue[];
 
-export const formSubmissionsTable = pgTable("form_submissions", {
+export const formSubmissionsTable = pgTable(
+  "form_submissions",
+  {
     id: uuid("id").primaryKey().defaultRandom(),
 
-    formId: uuid('form_id').references(() => formsTable.id, { onDelete: "cascade" }).notNull(),
+    formId: uuid("form_id")
+      .references(() => formsTable.id, { onDelete: "cascade" })
+      .notNull(),
 
-    values: jsonb('values').$type<FormSubmissionValueRow>().notNull(),
+    values: jsonb("values").$type<FormSubmissionValueRow>().notNull(),
 
     // Idempotency key supplied by the client (UUID generated when the
     // submit form mounts). When present, the server rejects duplicate
@@ -38,19 +52,21 @@ export const formSubmissionsTable = pgTable("form_submissions", {
     utmCampaign: varchar("utm_campaign", { length: 255 }),
     timeSpentMs: integer("time_spent_ms"), // ms from page load to submit
 
-    createdAt: timestamp('created_at').defaultNow().notNull()
-}, (table) => ({
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+  },
+  (table) => ({
     formCreatedIdx: index("form_submissions_form_created_idx").on(table.formId, table.createdAt),
     // Partial unique index on (form_id, idempotency_key) so the constraint
     // only applies when an idempotency key is actually supplied.
     formIdempotencyIdx: uniqueIndex("form_submissions_form_idempotency_idx")
-        .on(table.formId, table.idempotencyKey)
-        .where(sql`${table.idempotencyKey} IS NOT NULL`),
+      .on(table.formId, table.idempotencyKey)
+      .where(sql`${table.idempotencyKey} IS NOT NULL`),
     // Partial unique index on (form_id, visitor_id). Enforces the
     // "one submission per visitor" rule at the database level so two
     // racing inserts can't both squeak through the application-level
     // check. NULL visitor_ids (no localStorage available) are exempt.
     formVisitorIdx: uniqueIndex("form_submissions_form_visitor_idx")
-        .on(table.formId, table.visitorId)
-        .where(sql`${table.visitorId} IS NOT NULL`),
-}))
+      .on(table.formId, table.visitorId)
+      .where(sql`${table.visitorId} IS NOT NULL`),
+  }),
+);
diff --git a/packages/database/models/form-view.ts b/packages/database/models/form-view.ts
index 6aef0be..ad556d8 100644
--- a/packages/database/models/form-view.ts
+++ b/packages/database/models/form-view.ts
@@ -1,9 +1,13 @@
-import { index, pgTable, uuid, varchar, timestamp } from 'drizzle-orm/pg-core'
-import { formsTable } from './form'
+import { index, pgTable, uuid, varchar, timestamp } from "drizzle-orm/pg-core";
+import { formsTable } from "./form";
 
-export const formViewsTable = pgTable("form_views", {
+export const formViewsTable = pgTable(
+  "form_views",
+  {
     id: uuid("id").primaryKey().defaultRandom(),
-    formId: uuid('form_id').references(() => formsTable.id, { onDelete: "cascade" }).notNull(),
+    formId: uuid("form_id")
+      .references(() => formsTable.id, { onDelete: "cascade" })
+      .notNull(),
     // Per-form visitor UUID generated by the public form page and persisted
     // in localStorage. Used to dedup reloads within a short time window so a
     // single visitor mashing F5 doesn't inflate the view count.
@@ -14,11 +18,16 @@ export const formViewsTable = pgTable("form_views", {
     utmSource: varchar("utm_source", { length: 255 }),
     utmMedium: varchar("utm_medium", { length: 255 }),
     utmCampaign: varchar("utm_campaign", { length: 255 }),
-    createdAt: timestamp('created_at').defaultNow().notNull()
-}, (table) => ({
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+  },
+  (table) => ({
     formIdx: index("form_views_form_id_idx").on(table.formId),
     formCreatedIdx: index("form_views_form_created_idx").on(table.formId, table.createdAt),
     // Powers the dedup lookup: "any row for this (form, visitor) in last 30 min?"
-    formVisitorCreatedIdx: index("form_views_form_visitor_created_idx")
-        .on(table.formId, table.visitorId, table.createdAt),
-}))
+    formVisitorCreatedIdx: index("form_views_form_visitor_created_idx").on(
+      table.formId,
+      table.visitorId,
+      table.createdAt,
+    ),
+  }),
+);
diff --git a/packages/database/models/form.ts b/packages/database/models/form.ts
index 09050bd..e47a6df 100644
--- a/packages/database/models/form.ts
+++ b/packages/database/models/form.ts
@@ -1,30 +1,36 @@
 import {
-    pgTable,
-    uuid,
-    varchar,
-    timestamp,
-    boolean,
-    text,
-    integer,
-    index
-} from 'drizzle-orm/pg-core'
-import { usersTable } from './auth'
+  pgTable,
+  uuid,
+  varchar,
+  timestamp,
+  boolean,
+  text,
+  integer,
+  index,
+} from "drizzle-orm/pg-core";
+import { usersTable } from "./auth";
 
-export const formsTable = pgTable("forms", {
+export const formsTable = pgTable(
+  "forms",
+  {
     id: uuid("id").defaultRandom().primaryKey(),
-    
+
     title: varchar("title", { length: 150 }).notNull(),
     description: text("description"),
 
     slug: varchar("slug", { length: 150 }).notNull().unique(),
-    
-    ownerId: text("owner_id").references(() => usersTable.id, {
-        onDelete: "cascade"
-    }).notNull(),
+
+    ownerId: text("owner_id")
+      .references(() => usersTable.id, {
+        onDelete: "cascade",
+      })
+      .notNull(),
 
     isPublished: boolean("is_published").default(false).notNull(),
     isArchived: boolean("is_archived").default(false).notNull(),
     isOpen: boolean("is_open").default(true).notNull(),
+    maxSubmissions: integer("max_submissions"),
+    expiresAt: timestamp("expires_at"),
 
     // Optimistic-lock counter — incremented on every mutating update.
     // Concurrent writers compare-and-set against this; the loser gets a
@@ -32,9 +38,14 @@ export const formsTable = pgTable("forms", {
     version: integer("version").notNull().default(0),
 
     createdAt: timestamp("created_at").defaultNow().notNull(),
-    updatedAt: timestamp("updated_at").defaultNow().$onUpdate(() => new Date()).notNull(),
+    updatedAt: timestamp("updated_at")
+      .defaultNow()
+      .$onUpdate(() => new Date())
+      .notNull(),
     publishedAt: timestamp("published_at"),
-}, (table) => ({
+  },
+  (table) => ({
     // Hot path: list/stats/limit queries filter by owner, often ordered by createdAt.
     ownerCreatedIdx: index("forms_owner_created_idx").on(table.ownerId, table.createdAt),
-}))
+  }),
+);
diff --git a/packages/database/schema.ts b/packages/database/schema.ts
index a1e8c05..0e62fb7 100644
--- a/packages/database/schema.ts
+++ b/packages/database/schema.ts
@@ -5,4 +5,3 @@ export * from "./models/form-submission";
 export * from "./models/form-view";
 export * from "./models/form-field-view";
 export * from "./models/form-collaborator";
-
diff --git a/packages/logger/index.ts b/packages/logger/index.ts
index ae185e7..746671c 100644
--- a/packages/logger/index.ts
+++ b/packages/logger/index.ts
@@ -3,8 +3,7 @@ import { env } from "./env";
 
 type LoggerLevel = "error" | "info" | "debug";
 
-const level: LoggerLevel =
-  env.LOGGER_LEVEL ?? (env.NODE_ENV === "development" ? "debug" : "error");
+const level: LoggerLevel = env.LOGGER_LEVEL ?? (env.NODE_ENV === "development" ? "debug" : "error");
 
 const isDevelopment = env.NODE_ENV === "development";
 
@@ -13,9 +12,7 @@ const format = isDevelopment
       winston.format.colorize(),
       winston.format.timestamp({ format: "YYYY-MM-DD HH:mm:ss" }),
       winston.format.printf(({ timestamp, level, message, ...meta }) => {
-        const metaString = Object.keys(meta).length
-          ? `\n${JSON.stringify(meta, null, 2)}`
-          : "";
+        const metaString = Object.keys(meta).length ? `\n${JSON.stringify(meta, null, 2)}` : "";
         return `${timestamp} [${level}]: ${message}${metaString}`;
       }),
     )
diff --git a/packages/services/analytics/index.ts b/packages/services/analytics/index.ts
index aae94d4..5cca2c1 100644
--- a/packages/services/analytics/index.ts
+++ b/packages/services/analytics/index.ts
@@ -1,10 +1,10 @@
-import { db, eq, and, desc, gte, lt, count } from "@repo/database"
-import { formsTable } from "@repo/database/models/form"
-import { formFieldsTable } from "@repo/database/models/form-field"
-import { formSubmissionsTable } from "@repo/database/models/form-submission"
-import { formViewsTable } from "@repo/database/models/form-view"
-import { formFieldViewsTable } from "@repo/database/models/form-field-view"
-import { requireViewer } from "../form"
+import { db, eq, and, desc, gte, lt, count } from "@repo/database";
+import { formsTable } from "@repo/database/models/form";
+import { formFieldsTable } from "@repo/database/models/form-field";
+import { formSubmissionsTable } from "@repo/database/models/form-submission";
+import { formViewsTable } from "@repo/database/models/form-view";
+import { formFieldViewsTable } from "@repo/database/models/form-field-view";
+import { requireViewer } from "../form";
 
 import {
   getFormAnalyticsInput,
@@ -17,102 +17,110 @@ import {
   type RecordViewInputType,
   recordFieldAnswerInput,
   type RecordFieldAnswerInputType,
-} from "./model"
+} from "./model";
 
-const DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
+const DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 
 class AnalyticsService {
-
   /**
    * Returns all free-tier analytics for a single form in one call.
    * Ownership is verified before querying.
    */
   public async getFormAnalytics(payload: GetFormAnalyticsInputType & { ownerId: string }) {
-    const { formId } = await getFormAnalyticsInput.parseAsync(payload)
-    const { ownerId: userId } = payload
+    const { formId } = await getFormAnalyticsInput.parseAsync(payload);
+    const { ownerId: userId } = payload;
 
-    await requireViewer(formId, userId)
+    await requireViewer(formId, userId);
 
-    const thirtyDaysAgo = new Date()
-    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 29)
-    thirtyDaysAgo.setHours(0, 0, 0, 0)
+    const thirtyDaysAgo = new Date();
+    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 29);
+    thirtyDaysAgo.setHours(0, 0, 0, 0);
 
     // Run all DB queries in parallel
     const [totalResponseRow, deviceRows, recentTimestamps] = await Promise.all([
       // Total submissions (all time)
-      db.select({ value: count() })
+      db
+        .select({ value: count() })
         .from(formSubmissionsTable)
         .where(eq(formSubmissionsTable.formId, formId)),
 
       // Device breakdown from views
-      db.select({ deviceType: formViewsTable.deviceType, value: count() })
+      db
+        .select({ deviceType: formViewsTable.deviceType, value: count() })
         .from(formViewsTable)
         .where(eq(formViewsTable.formId, formId))
         .groupBy(formViewsTable.deviceType),
 
       // Submission timestamps for last 30 days (no values jsonb — just timestamps)
-      db.select({ createdAt: formSubmissionsTable.createdAt })
+      db
+        .select({ createdAt: formSubmissionsTable.createdAt })
         .from(formSubmissionsTable)
-        .where(and(
-          eq(formSubmissionsTable.formId, formId),
-          gte(formSubmissionsTable.createdAt, thirtyDaysAgo)
-        )),
-    ])
+        .where(
+          and(
+            eq(formSubmissionsTable.formId, formId),
+            gte(formSubmissionsTable.createdAt, thirtyDaysAgo),
+          ),
+        ),
+    ]);
 
-    const totalResponses = Number(totalResponseRow[0]?.value ?? 0)
+    const totalResponses = Number(totalResponseRow[0]?.value ?? 0);
 
     // ─── Views & device breakdown ─────────────────────────────────────────
-    const deviceMap: Record<string, number> = { desktop: 0, mobile: 0, tablet: 0 }
-    let totalViews = 0
-    deviceRows.forEach(r => {
-      const n = Number(r.value)
-      totalViews += n
-      const dev = r.deviceType.toLowerCase()
-      if (dev.includes("mobile")) deviceMap["mobile"] = (deviceMap["mobile"] ?? 0) + n
-      else if (dev.includes("tablet")) deviceMap["tablet"] = (deviceMap["tablet"] ?? 0) + n
-      else deviceMap["desktop"] = (deviceMap["desktop"] ?? 0) + n
-    })
-    const deviceViews = Object.entries(deviceMap).map(([device, cnt]) => ({ device, count: cnt }))
+    const deviceMap: Record<string, number> = { desktop: 0, mobile: 0, tablet: 0 };
+    let totalViews = 0;
+    deviceRows.forEach((r) => {
+      const n = Number(r.value);
+      totalViews += n;
+      const dev = r.deviceType.toLowerCase();
+      if (dev.includes("mobile")) deviceMap["mobile"] = (deviceMap["mobile"] ?? 0) + n;
+      else if (dev.includes("tablet")) deviceMap["tablet"] = (deviceMap["tablet"] ?? 0) + n;
+      else deviceMap["desktop"] = (deviceMap["desktop"] ?? 0) + n;
+    });
+    const deviceViews = Object.entries(deviceMap).map(([device, cnt]) => ({ device, count: cnt }));
 
     // Submissions are now deduped per visitor at the DB level, so under
     // normal conditions submissions ≤ views and this ratio sits in
     // [0, 100]. Visitors without localStorage (private mode) bypass
     // dedup, so we still clamp as defence-in-depth — the dashboard
     // should never display a non-physical rate like 500%.
-    const completionRate = totalViews > 0
-      ? parseFloat((Math.min((totalResponses / totalViews) * 100, 100)).toFixed(1))
-      : 0
+    const completionRate =
+      totalViews > 0
+        ? parseFloat(Math.min((totalResponses / totalViews) * 100, 100).toFixed(1))
+        : 0;
 
     // ─── Daily trends (last 30 days, zero-filled) ─────────────────────────
-    const dailyMap: Record<string, number> = {}
+    const dailyMap: Record<string, number> = {};
     for (let i = 29; i >= 0; i--) {
-      const d = new Date()
-      d.setDate(d.getDate() - i)
-      const key = d.toLocaleDateString("en-US", { month: "short", day: "numeric" })
-      dailyMap[key] = 0
+      const d = new Date();
+      d.setDate(d.getDate() - i);
+      const key = d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+      dailyMap[key] = 0;
     }
-    recentTimestamps.forEach(s => {
-      const key = new Date(s.createdAt).toLocaleDateString("en-US", { month: "short", day: "numeric" })
-      if (dailyMap[key] !== undefined) dailyMap[key]++
-    })
-    const dailyTrends = Object.entries(dailyMap).map(([date, cnt]) => ({ date, count: cnt }))
+    recentTimestamps.forEach((s) => {
+      const key = new Date(s.createdAt).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+      });
+      if (dailyMap[key] !== undefined) dailyMap[key]++;
+    });
+    const dailyTrends = Object.entries(dailyMap).map(([date, cnt]) => ({ date, count: cnt }));
 
     // ─── Peak day of week ─────────────────────────────────────────────────
-    const dowMap: Record<number, number> = {}
-    for (let d = 0; d < 7; d++) dowMap[d] = 0
-    recentTimestamps.forEach(s => {
-      const dow = new Date(s.createdAt).getDay()
-      dowMap[dow] = (dowMap[dow] ?? 0) + 1
-    })
+    const dowMap: Record<number, number> = {};
+    for (let d = 0; d < 7; d++) dowMap[d] = 0;
+    recentTimestamps.forEach((s) => {
+      const dow = new Date(s.createdAt).getDay();
+      dowMap[dow] = (dowMap[dow] ?? 0) + 1;
+    });
     const peakDowEntry = Object.entries(dowMap).reduce(
       (best, [d, cnt]) => (cnt > best.count ? { day: Number(d), count: cnt } : best),
-      { day: 0, count: 0 }
-    )
-    const peakDay = peakDowEntry.count > 0 ? (DAYS[peakDowEntry.day] ?? null) : null
+      { day: 0, count: 0 },
+    );
+    const peakDay = peakDowEntry.count > 0 ? (DAYS[peakDowEntry.day] ?? null) : null;
 
     // ─── Averages ─────────────────────────────────────────────────────────
-    const avgSubmissionsPerDay = parseFloat((recentTimestamps.length / 30).toFixed(1))
-    const avgSubmissionsPerWeek = parseFloat((recentTimestamps.length / (30 / 7)).toFixed(1))
+    const avgSubmissionsPerDay = parseFloat((recentTimestamps.length / 30).toFixed(1));
+    const avgSubmissionsPerWeek = parseFloat((recentTimestamps.length / (30 / 7)).toFixed(1));
 
     return {
       totalResponses,
@@ -123,7 +131,7 @@ class AnalyticsService {
       peakDay,
       avgSubmissionsPerDay,
       avgSubmissionsPerWeek,
-    }
+    };
   }
 
   /**
@@ -131,25 +139,32 @@ class AnalyticsService {
    * 30/60/90d totals, and response velocity (first 24h after publish).
    */
   public async getProAnalytics(payload: GetProAnalyticsInputType & { ownerId: string }) {
-    const { formId } = await getProAnalyticsInput.parseAsync(payload)
-    const { ownerId: userId } = payload
+    const { formId } = await getProAnalyticsInput.parseAsync(payload);
+    const { ownerId: userId } = payload;
 
-    await requireViewer(formId, userId)
+    await requireViewer(formId, userId);
 
-    const formRows = await db.select({
-      id: formsTable.id,
-      publishedAt: formsTable.publishedAt,
-    })
+    const formRows = await db
+      .select({
+        id: formsTable.id,
+        publishedAt: formsTable.publishedAt,
+      })
       .from(formsTable)
-      .where(eq(formsTable.id, formId))
-
-    if (!formRows[0]) throw new Error("Form not found")
-    const form = formRows[0]
-
-    const now = new Date()
-    const ago30 = new Date(now); ago30.setDate(now.getDate() - 30); ago30.setHours(0, 0, 0, 0)
-    const ago60 = new Date(now); ago60.setDate(now.getDate() - 60); ago60.setHours(0, 0, 0, 0)
-    const ago90 = new Date(now); ago90.setDate(now.getDate() - 90); ago90.setHours(0, 0, 0, 0)
+      .where(eq(formsTable.id, formId));
+
+    if (!formRows[0]) throw new Error("Form not found");
+    const form = formRows[0];
+
+    const now = new Date();
+    const ago30 = new Date(now);
+    ago30.setDate(now.getDate() - 30);
+    ago30.setHours(0, 0, 0, 0);
+    const ago60 = new Date(now);
+    ago60.setDate(now.getDate() - 60);
+    ago60.setHours(0, 0, 0, 0);
+    const ago90 = new Date(now);
+    ago90.setDate(now.getDate() - 90);
+    ago90.setHours(0, 0, 0, 0);
 
     const [
       fields,
@@ -163,266 +178,349 @@ class AnalyticsService {
       fieldViewRows,
       rawFieldViewRows,
     ] = await Promise.all([
-      db.select({
-        id: formFieldsTable.id,
-        label: formFieldsTable.label,
-        type: formFieldsTable.type,
-        options: formFieldsTable.options,
-      }).from(formFieldsTable).where(eq(formFieldsTable.formId, formId)),
-
-      db.select({
-        values: formSubmissionsTable.values,
-        createdAt: formSubmissionsTable.createdAt,
-        timeSpentMs: formSubmissionsTable.timeSpentMs,
-      })
+      db
+        .select({
+          id: formFieldsTable.id,
+          label: formFieldsTable.label,
+          type: formFieldsTable.type,
+          options: formFieldsTable.options,
+        })
+        .from(formFieldsTable)
+        .where(eq(formFieldsTable.formId, formId)),
+
+      db
+        .select({
+          values: formSubmissionsTable.values,
+          createdAt: formSubmissionsTable.createdAt,
+          timeSpentMs: formSubmissionsTable.timeSpentMs,
+        })
         .from(formSubmissionsTable)
         .where(eq(formSubmissionsTable.formId, formId))
         .orderBy(desc(formSubmissionsTable.createdAt))
         .limit(5000), // safety cap — enough for any real analytics calculation
 
-      db.select({ value: count() }).from(formSubmissionsTable)
-        .where(and(eq(formSubmissionsTable.formId, formId), gte(formSubmissionsTable.createdAt, ago30))),
+      db
+        .select({ value: count() })
+        .from(formSubmissionsTable)
+        .where(
+          and(eq(formSubmissionsTable.formId, formId), gte(formSubmissionsTable.createdAt, ago30)),
+        ),
 
-      db.select({ value: count() }).from(formSubmissionsTable)
-        .where(and(eq(formSubmissionsTable.formId, formId), gte(formSubmissionsTable.createdAt, ago60))),
+      db
+        .select({ value: count() })
+        .from(formSubmissionsTable)
+        .where(
+          and(eq(formSubmissionsTable.formId, formId), gte(formSubmissionsTable.createdAt, ago60)),
+        ),
 
-      db.select({ value: count() }).from(formSubmissionsTable)
-        .where(and(eq(formSubmissionsTable.formId, formId), gte(formSubmissionsTable.createdAt, ago90))),
+      db
+        .select({ value: count() })
+        .from(formSubmissionsTable)
+        .where(
+          and(eq(formSubmissionsTable.formId, formId), gte(formSubmissionsTable.createdAt, ago90)),
+        ),
 
       // Top referrers from views
-      db.select({ referrer: formViewsTable.referrer, value: count() })
+      db
+        .select({ referrer: formViewsTable.referrer, value: count() })
         .from(formViewsTable)
         .where(eq(formViewsTable.formId, formId))
         .groupBy(formViewsTable.referrer),
 
       // UTM source breakdown from views
-      db.select({ utmSource: formViewsTable.utmSource, value: count() })
+      db
+        .select({ utmSource: formViewsTable.utmSource, value: count() })
         .from(formViewsTable)
         .where(eq(formViewsTable.formId, formId))
         .groupBy(formViewsTable.utmSource),
 
       // Total views (for overall drop-off context)
-      db.select({ value: count() })
-        .from(formViewsTable)
-        .where(eq(formViewsTable.formId, formId)),
+      db.select({ value: count() }).from(formViewsTable).where(eq(formViewsTable.formId, formId)),
 
       // Per-field answer counts from form_field_views (the real completion source)
-      db.select({ fieldId: formFieldViewsTable.fieldId, value: count() })
+      db
+        .select({ fieldId: formFieldViewsTable.fieldId, value: count() })
         .from(formFieldViewsTable)
         .where(eq(formFieldViewsTable.formId, formId))
         .groupBy(formFieldViewsTable.fieldId),
 
       // Raw field view rows with values — used for question distribution
-      db.select({ fieldId: formFieldViewsTable.fieldId, value: formFieldViewsTable.value, createdAt: formFieldViewsTable.createdAt })
+      db
+        .select({
+          fieldId: formFieldViewsTable.fieldId,
+          value: formFieldViewsTable.value,
+          createdAt: formFieldViewsTable.createdAt,
+        })
         .from(formFieldViewsTable)
         .where(eq(formFieldViewsTable.formId, formId))
         .orderBy(desc(formFieldViewsTable.createdAt)),
-    ])
+    ]);
     // ─── Day-of-week breakdown ─────────────────────────────────────────────
-    const SHORT_DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
-    const dowMap: Record<number, number> = {}
-    for (let d = 0; d < 7; d++) dowMap[d] = 0
-    allSubmissions.forEach(s => {
-      const dow = new Date(s.createdAt).getDay()
-      dowMap[dow] = (dowMap[dow] ?? 0) + 1
-    })
-    const dowBreakdown = SHORT_DAYS.map((day, i) => ({ day, count: dowMap[i] ?? 0 }))
+    const SHORT_DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    const dowMap: Record<number, number> = {};
+    for (let d = 0; d < 7; d++) dowMap[d] = 0;
+    allSubmissions.forEach((s) => {
+      const dow = new Date(s.createdAt).getDay();
+      dowMap[dow] = (dowMap[dow] ?? 0) + 1;
+    });
+    const dowBreakdown = SHORT_DAYS.map((day, i) => ({ day, count: dowMap[i] ?? 0 }));
 
     // ─── Response velocity (first 24h after publish) ───────────────────────
-    let velocityFirst24h = 0
+    let velocityFirst24h = 0;
     if (form.publishedAt) {
-      const publishedAt = new Date(form.publishedAt)
-      const cutoff = new Date(publishedAt.getTime() + 24 * 60 * 60 * 1000)
-      velocityFirst24h = allSubmissions.filter(s => {
-        const t = new Date(s.createdAt)
-        return t >= publishedAt && t <= cutoff
-      }).length
+      const publishedAt = new Date(form.publishedAt);
+      const cutoff = new Date(publishedAt.getTime() + 24 * 60 * 60 * 1000);
+      velocityFirst24h = allSubmissions.filter((s) => {
+        const t = new Date(s.createdAt);
+        return t >= publishedAt && t <= cutoff;
+      }).length;
     }
 
     // ─── Per-question distribution ─────────────────────────────────────────
     // Primary source: rawFieldViewRows (every Next click with the answer value)
     // This includes partial fills — people who answered but didn't submit.
     // Falls back to allSubmissions for any field that has no field view records yet.
-    const TEXT_TYPES = ["TEXT", "TEXTAREA", "EMAIL", "NUMBER", "PHONE", "URL", "DATE", "TIME"]
-    const CHOICE_TYPES_SET = ["SELECT", "RADIO", "CHECKBOX"]
+    const TEXT_TYPES = ["TEXT", "TEXTAREA", "EMAIL", "NUMBER", "PHONE", "URL", "DATE", "TIME"];
+    const CHOICE_TYPES_SET = ["SELECT", "RADIO", "CHECKBOX"];
 
-    const totalSubmissions = allSubmissions.length
+    const totalSubmissions = allSubmissions.length;
 
     // Group rawFieldViewRows by fieldId
-    const fieldViewsByField = new Map<string, Array<{ value: unknown; createdAt: Date }>>()
-    rawFieldViewRows.forEach(r => {
-      if (!fieldViewsByField.has(r.fieldId)) fieldViewsByField.set(r.fieldId, [])
-      fieldViewsByField.get(r.fieldId)!.push({ value: r.value, createdAt: r.createdAt })
-    })
+    const fieldViewsByField = new Map<string, Array<{ value: unknown; createdAt: Date }>>();
+    rawFieldViewRows.forEach((r) => {
+      if (!fieldViewsByField.has(r.fieldId)) fieldViewsByField.set(r.fieldId, []);
+      fieldViewsByField.get(r.fieldId)!.push({ value: r.value, createdAt: r.createdAt });
+    });
 
-    const questionDistribution = fields.map(field => {
+    const questionDistribution = fields.map((field) => {
       // Use rawFieldViewRows if available, otherwise fall back to allSubmissions
-      const fieldViewEntries = fieldViewsByField.get(field.id)
-      const useFieldViews = fieldViewEntries && fieldViewEntries.length > 0
+      const fieldViewEntries = fieldViewsByField.get(field.id);
+      const useFieldViews = fieldViewEntries && fieldViewEntries.length > 0;
 
       // Build the answers array from whichever source is available
       const answers: Array<{ value: unknown }> = useFieldViews
-        ? fieldViewEntries!.filter(e => e.value !== null && e.value !== undefined && e.value !== "")
+        ? fieldViewEntries!.filter(
+            (e) => e.value !== null && e.value !== undefined && e.value !== "",
+          )
         : allSubmissions
-            .map(s => (s.values as Array<{ formFieldId: string; value: unknown }>).find(v => v.formFieldId === field.id))
-            .filter((a): a is { formFieldId: string; value: unknown } => a !== undefined && a.value !== null && a.value !== "")
-
-      const totalAnswered = useFieldViews ? (fieldViewsByField.get(field.id)?.length ?? 0) : answers.length
+            .map((s) =>
+              (s.values as Array<{ formFieldId: string; value: unknown }>).find(
+                (v) => v.formFieldId === field.id,
+              ),
+            )
+            .filter(
+              (a): a is { formFieldId: string; value: unknown } =>
+                a !== undefined && a.value !== null && a.value !== "",
+            );
+
+      const totalAnswered = useFieldViews
+        ? (fieldViewsByField.get(field.id)?.length ?? 0)
+        : answers.length;
 
       if (CHOICE_TYPES_SET.includes(field.type)) {
-        const valueCounts: Record<string, number> = {}
-        answers.forEach(a => {
-          const vals = Array.isArray(a.value) ? a.value : [a.value]
-          vals.forEach(v => {
-            const s = String(v)
-            valueCounts[s] = (valueCounts[s] ?? 0) + 1
-          })
-        })
+        const valueCounts: Record<string, number> = {};
+        answers.forEach((a) => {
+          const vals = Array.isArray(a.value) ? a.value : [a.value];
+          vals.forEach((v) => {
+            const s = String(v);
+            valueCounts[s] = (valueCounts[s] ?? 0) + 1;
+          });
+        });
         const optionCounts = Object.entries(valueCounts)
           .sort((a, b) => b[1] - a[1])
           .map(([value, cnt]) => ({
             value,
             count: cnt,
             percent: answers.length > 0 ? parseFloat(((cnt / answers.length) * 100).toFixed(1)) : 0,
-          }))
-        return { fieldId: field.id, fieldLabel: field.label, fieldType: field.type, totalAnswered, optionCounts }
-
+          }));
+        return {
+          fieldId: field.id,
+          fieldLabel: field.label,
+          fieldType: field.type,
+          totalAnswered,
+          optionCounts,
+        };
       } else if (field.type === "RATING") {
-        const nums = answers.map(a => Number(a.value)).filter(n => !isNaN(n))
-        const averageRating = nums.length > 0
-          ? parseFloat((nums.reduce((s, n) => s + n, 0) / nums.length).toFixed(1))
-          : 0
-        const ratingCounts: Record<number, number> = { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 }
-        nums.forEach(n => {
-          const clamped = Math.min(5, Math.max(1, Math.round(n)))
-          ratingCounts[clamped] = (ratingCounts[clamped] ?? 0) + 1
-        })
-        const ratingDistribution = [1, 2, 3, 4, 5].map(r => ({
+        const nums = answers.map((a) => Number(a.value)).filter((n) => !isNaN(n));
+        const averageRating =
+          nums.length > 0
+            ? parseFloat((nums.reduce((s, n) => s + n, 0) / nums.length).toFixed(1))
+            : 0;
+        const ratingCounts: Record<number, number> = { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 };
+        nums.forEach((n) => {
+          const clamped = Math.min(5, Math.max(1, Math.round(n)));
+          ratingCounts[clamped] = (ratingCounts[clamped] ?? 0) + 1;
+        });
+        const ratingDistribution = [1, 2, 3, 4, 5].map((r) => ({
           rating: r,
           count: ratingCounts[r] ?? 0,
-          percent: nums.length > 0 ? parseFloat((((ratingCounts[r] ?? 0) / nums.length) * 100).toFixed(1)) : 0,
-        }))
-        return { fieldId: field.id, fieldLabel: field.label, fieldType: field.type, totalAnswered, averageRating, ratingDistribution }
-
+          percent:
+            nums.length > 0
+              ? parseFloat((((ratingCounts[r] ?? 0) / nums.length) * 100).toFixed(1))
+              : 0,
+        }));
+        return {
+          fieldId: field.id,
+          fieldLabel: field.label,
+          fieldType: field.type,
+          totalAnswered,
+          averageRating,
+          ratingDistribution,
+        };
       } else if (field.type === "TOGGLE") {
-        const yes = answers.filter(a => a.value === true || a.value === "true").length
-        const no = answers.filter(a => a.value === false || a.value === "false").length
-        return { fieldId: field.id, fieldLabel: field.label, fieldType: field.type, totalAnswered, toggleCounts: { yes, no } }
-
+        const yes = answers.filter((a) => a.value === true || a.value === "true").length;
+        const no = answers.filter((a) => a.value === false || a.value === "false").length;
+        return {
+          fieldId: field.id,
+          fieldLabel: field.label,
+          fieldType: field.type,
+          totalAnswered,
+          toggleCounts: { yes, no },
+        };
       } else if (TEXT_TYPES.includes(field.type)) {
         const textSamples = answers
           .slice(0, 5)
-          .map(a => String(a.value))
-          .filter(s => s.trim().length > 0)
-        return { fieldId: field.id, fieldLabel: field.label, fieldType: field.type, totalAnswered, textSamples }
-
+          .map((a) => String(a.value))
+          .filter((s) => s.trim().length > 0);
+        return {
+          fieldId: field.id,
+          fieldLabel: field.label,
+          fieldType: field.type,
+          totalAnswered,
+          textSamples,
+        };
       } else {
-        return { fieldId: field.id, fieldLabel: field.label, fieldType: field.type, totalAnswered }
+        return { fieldId: field.id, fieldLabel: field.label, fieldType: field.type, totalAnswered };
       }
-    })
+    });
 
     // ─── Median response time (minutes from publishedAt to submission) ─────
-    let medianResponseTime: number | null = null
+    let medianResponseTime: number | null = null;
     if (form.publishedAt && allSubmissions.length > 0) {
-      const publishedAt = new Date(form.publishedAt)
+      const publishedAt = new Date(form.publishedAt);
       const deltas = allSubmissions
-        .map(s => (new Date(s.createdAt).getTime() - publishedAt.getTime()) / 60000)
-        .filter(d => d >= 0)
-        .sort((a, b) => a - b)
+        .map((s) => (new Date(s.createdAt).getTime() - publishedAt.getTime()) / 60000)
+        .filter((d) => d >= 0)
+        .sort((a, b) => a - b);
       if (deltas.length > 0) {
-        const mid = Math.floor(deltas.length / 2)
-        medianResponseTime = deltas.length % 2 === 0
-          ? parseFloat(((deltas[mid - 1]! + deltas[mid]!) / 2).toFixed(1))
-          : parseFloat((deltas[mid]!).toFixed(1))
+        const mid = Math.floor(deltas.length / 2);
+        medianResponseTime =
+          deltas.length % 2 === 0
+            ? parseFloat(((deltas[mid - 1]! + deltas[mid]!) / 2).toFixed(1))
+            : parseFloat(deltas[mid]!.toFixed(1));
       }
     }
 
     // ─── Returning rate ────────────────────────────────────────────────────
     // Find the first EMAIL field (fallback: first TEXT field)
-    const emailField = fields.find(f => f.type === "EMAIL") ?? fields.find(f => TEXT_TYPES.includes(f.type))
-    let returningRate = 0
+    const emailField =
+      fields.find((f) => f.type === "EMAIL") ?? fields.find((f) => TEXT_TYPES.includes(f.type));
+    let returningRate = 0;
     if (emailField && totalSubmissions > 0) {
-      const valueCounts: Record<string, number> = {}
-      allSubmissions.forEach(s => {
-        const entry = (s.values as Array<{ formFieldId: string; value: unknown }>)
-          .find(v => v.formFieldId === emailField.id)
+      const valueCounts: Record<string, number> = {};
+      allSubmissions.forEach((s) => {
+        const entry = (s.values as Array<{ formFieldId: string; value: unknown }>).find(
+          (v) => v.formFieldId === emailField.id,
+        );
         if (entry?.value) {
-          const key = String(entry.value).trim().toLowerCase()
-          if (key) valueCounts[key] = (valueCounts[key] ?? 0) + 1
+          const key = String(entry.value).trim().toLowerCase();
+          if (key) valueCounts[key] = (valueCounts[key] ?? 0) + 1;
         }
-      })
-      const duplicateCount = Object.values(valueCounts).filter(c => c > 1).reduce((sum, c) => sum + c, 0)
-      returningRate = parseFloat(((duplicateCount / totalSubmissions) * 100).toFixed(1))
+      });
+      const duplicateCount = Object.values(valueCounts)
+        .filter((c) => c > 1)
+        .reduce((sum, c) => sum + c, 0);
+      returningRate = parseFloat(((duplicateCount / totalSubmissions) * 100).toFixed(1));
     }
 
     // ─── Peak day ──────────────────────────────────────────────────────────
-    const fullDayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
+    const fullDayNames = [
+      "Sunday",
+      "Monday",
+      "Tuesday",
+      "Wednesday",
+      "Thursday",
+      "Friday",
+      "Saturday",
+    ];
     const peakEntry = dowBreakdown.reduce(
       (best, entry, i) => (entry.count > best.count ? { count: entry.count, idx: i } : best),
-      { count: 0, idx: 0 }
-    )
-    const peakDay = peakEntry.count > 0 ? (fullDayNames[peakEntry.idx] ?? null) : null
+      { count: 0, idx: 0 },
+    );
+    const peakDay = peakEntry.count > 0 ? (fullDayNames[peakEntry.idx] ?? null) : null;
 
     // ─── Field completion rates ────────────────────────────────────────────
     // Source: form_field_views — one row per field per visitor who answered it
     // and clicked Next. Denominator: total form views (visitors who opened it).
     // This gives true per-field drop-off: e.g. if 4 people opened the form,
     // 3 answered field A, 2 answered field B → A=75%, B=50%.
-    const totalViews = Number(totalViewsRow[0]?.value ?? 0)
+    const totalViews = Number(totalViewsRow[0]?.value ?? 0);
     // Build a map of fieldId → answer count from form_field_views
     const fieldViewMap = new Map<string, number>(
-      fieldViewRows.map(r => [r.fieldId, Number(r.value)])
-    )
+      fieldViewRows.map((r) => [r.fieldId, Number(r.value)]),
+    );
     // Denominator: prefer total views; fall back to max field interactions if
     // views weren't recorded (e.g. before this feature was deployed)
-    const maxFieldInteractions = fieldViewRows.reduce((m, r) => Math.max(m, Number(r.value)), 0)
-    const denominator = totalViews > 0 ? totalViews : (maxFieldInteractions > 0 ? maxFieldInteractions : totalSubmissions)
-
-    const fieldCompletionRates = fields.map(field => {
-      const answeredCount = fieldViewMap.get(field.id) ?? 0
-      const rate = denominator > 0
-        ? parseFloat(((answeredCount / denominator) * 100).toFixed(1))
-        : 0
-      return { fieldId: field.id, fieldLabel: field.label, rate }
-    })
+    const maxFieldInteractions = fieldViewRows.reduce((m, r) => Math.max(m, Number(r.value)), 0);
+    const denominator =
+      totalViews > 0
+        ? totalViews
+        : maxFieldInteractions > 0
+          ? maxFieldInteractions
+          : totalSubmissions;
+
+    const fieldCompletionRates = fields.map((field) => {
+      const answeredCount = fieldViewMap.get(field.id) ?? 0;
+      const rate =
+        denominator > 0 ? parseFloat(((answeredCount / denominator) * 100).toFixed(1)) : 0;
+      return { fieldId: field.id, fieldLabel: field.label, rate };
+    });
 
     // ─── Avg time spent (from timeSpentMs column) ─────────────────────────
     const timings = allSubmissions
-      .map(s => s.timeSpentMs)
-      .filter((t): t is number => t !== null && t !== undefined && t > 0)
-    const avgTimeSpentMs = timings.length > 0
-      ? Math.round(timings.reduce((s, t) => s + t, 0) / timings.length)
-      : null
+      .map((s) => s.timeSpentMs)
+      .filter((t): t is number => t !== null && t !== undefined && t > 0);
+    const avgTimeSpentMs =
+      timings.length > 0 ? Math.round(timings.reduce((s, t) => s + t, 0) / timings.length) : null;
 
     // ─── Top referrers ─────────────────────────────────────────────────────
     const topReferrers = referrerRows
-      .filter(r => r.referrer !== null && r.referrer !== undefined && r.referrer !== "")
-      .map(r => {
-        let domain = r.referrer ?? "direct"
-        try { domain = new URL(r.referrer ?? "").hostname.replace(/^www\./, "") } catch {}
-        return { referrer: domain, count: Number(r.value) }
+      .filter((r) => r.referrer !== null && r.referrer !== undefined && r.referrer !== "")
+      .map((r) => {
+        let domain = r.referrer ?? "direct";
+        try {
+          domain = new URL(r.referrer ?? "").hostname.replace(/^www\./, "");
+        } catch {}
+        return { referrer: domain, count: Number(r.value) };
       })
-      .reduce((acc, cur) => {
-        const existing = acc.find(a => a.referrer === cur.referrer)
-        if (existing) { existing.count += cur.count } else { acc.push({ ...cur }) }
-        return acc
-      }, [] as { referrer: string; count: number }[])
+      .reduce(
+        (acc, cur) => {
+          const existing = acc.find((a) => a.referrer === cur.referrer);
+          if (existing) {
+            existing.count += cur.count;
+          } else {
+            acc.push({ ...cur });
+          }
+          return acc;
+        },
+        [] as { referrer: string; count: number }[],
+      )
       .sort((a, b) => b.count - a.count)
-      .slice(0, 10)
+      .slice(0, 10);
 
     // Add "Direct" entry for null/empty referrers
     const directCount = referrerRows
-      .filter(r => !r.referrer || r.referrer === "")
-      .reduce((s, r) => s + Number(r.value), 0)
-    if (directCount > 0) topReferrers.push({ referrer: "Direct", count: directCount })
-    topReferrers.sort((a, b) => b.count - a.count)
+      .filter((r) => !r.referrer || r.referrer === "")
+      .reduce((s, r) => s + Number(r.value), 0);
+    if (directCount > 0) topReferrers.push({ referrer: "Direct", count: directCount });
+    topReferrers.sort((a, b) => b.count - a.count);
 
     // ─── UTM source breakdown ──────────────────────────────────────────────
     const utmSources = utmRows
-      .filter(r => r.utmSource !== null && r.utmSource !== undefined && r.utmSource !== "")
-      .map(r => ({ source: r.utmSource ?? "unknown", count: Number(r.value) }))
+      .filter((r) => r.utmSource !== null && r.utmSource !== undefined && r.utmSource !== "")
+      .map((r) => ({ source: r.utmSource ?? "unknown", count: Number(r.value) }))
       .sort((a, b) => b.count - a.count)
-      .slice(0, 10)
+      .slice(0, 10);
 
     return {
       dowBreakdown,
@@ -438,7 +536,7 @@ class AnalyticsService {
       avgTimeSpentMs,
       topReferrers,
       utmSources,
-    }
+    };
   }
 
   /**
@@ -451,35 +549,33 @@ class AnalyticsService {
    * arrive — the next page could repeat or skip rows).
    */
   public async getSubmissionsList(payload: GetSubmissionsListInputType & { ownerId: string }) {
-    const { formId, cursor, limit } = await getSubmissionsListInput.parseAsync(payload)
-    const { ownerId: userId } = payload
+    const { formId, cursor, limit } = await getSubmissionsListInput.parseAsync(payload);
+    const { ownerId: userId } = payload;
 
-    await requireViewer(formId, userId)
+    await requireViewer(formId, userId);
 
-    const pageSize = limit ?? 50
-    const cursorDate = cursor ? new Date(cursor) : null
+    const pageSize = limit ?? 50;
+    const cursorDate = cursor ? new Date(cursor) : null;
     const whereClause = cursorDate
-      ? and(
-          eq(formSubmissionsTable.formId, formId),
-          lt(formSubmissionsTable.createdAt, cursorDate)
-        )
-      : eq(formSubmissionsTable.formId, formId)
+      ? and(eq(formSubmissionsTable.formId, formId), lt(formSubmissionsTable.createdAt, cursorDate))
+      : eq(formSubmissionsTable.formId, formId);
 
     // Fetch pageSize+1 to peek at whether another page exists without a
     // separate COUNT round-trip.
-    const rows = await db.select()
+    const rows = await db
+      .select()
       .from(formSubmissionsTable)
       .where(whereClause)
       .orderBy(desc(formSubmissionsTable.createdAt))
-      .limit(pageSize + 1)
+      .limit(pageSize + 1);
 
-    const hasMore = rows.length > pageSize
-    const submissions = hasMore ? rows.slice(0, pageSize) : rows
+    const hasMore = rows.length > pageSize;
+    const submissions = hasMore ? rows.slice(0, pageSize) : rows;
     const nextCursor = hasMore
       ? submissions[submissions.length - 1]!.createdAt.toISOString()
-      : null
+      : null;
 
-    return { submissions, nextCursor }
+    return { submissions, nextCursor };
   }
 
   /**
@@ -492,22 +588,25 @@ class AnalyticsService {
    * reload-spam into a single view per browsing session.
    */
   public async recordView(payload: RecordViewInputType) {
-    const { formId, visitorId, deviceType, referrer, utmSource, utmMedium, utmCampaign } = await recordViewInput.parseAsync(payload)
+    const { formId, visitorId, deviceType, referrer, utmSource, utmMedium, utmCampaign } =
+      await recordViewInput.parseAsync(payload);
 
     if (visitorId) {
-      const thirtyMinutesAgo = new Date(Date.now() - 30 * 60 * 1000)
+      const thirtyMinutesAgo = new Date(Date.now() - 30 * 60 * 1000);
       const existing = await db
         .select({ id: formViewsTable.id })
         .from(formViewsTable)
-        .where(and(
-          eq(formViewsTable.formId, formId),
-          eq(formViewsTable.visitorId, visitorId),
-          gte(formViewsTable.createdAt, thirtyMinutesAgo),
-        ))
-        .limit(1)
+        .where(
+          and(
+            eq(formViewsTable.formId, formId),
+            eq(formViewsTable.visitorId, visitorId),
+            gte(formViewsTable.createdAt, thirtyMinutesAgo),
+          ),
+        )
+        .limit(1);
 
       if (existing.length > 0) {
-        return { success: true }
+        return { success: true };
       }
     }
 
@@ -519,8 +618,8 @@ class AnalyticsService {
       utmSource: utmSource ?? null,
       utmMedium: utmMedium ?? null,
       utmCampaign: utmCampaign ?? null,
-    })
-    return { success: true }
+    });
+    return { success: true };
   }
 
   /**
@@ -530,14 +629,14 @@ class AnalyticsService {
    * Powers accurate per-field completion rates in Pro analytics.
    */
   public async recordFieldAnswer(payload: RecordFieldAnswerInputType) {
-    const { formId, fieldId, value } = await recordFieldAnswerInput.parseAsync(payload)
+    const { formId, fieldId, value } = await recordFieldAnswerInput.parseAsync(payload);
     await db.insert(formFieldViewsTable).values({
       formId,
       fieldId,
       value: value ?? null,
-    })
-    return { success: true }
+    });
+    return { success: true };
   }
 }
 
-export default AnalyticsService
+export default AnalyticsService;
diff --git a/packages/services/analytics/model.ts b/packages/services/analytics/model.ts
index ae5c95f..85f3dc3 100644
--- a/packages/services/analytics/model.ts
+++ b/packages/services/analytics/model.ts
@@ -1,23 +1,31 @@
-import { z } from 'zod'
+import { z } from "zod";
 
 // ─── Inputs ──────────────────────────────────────────────────────────────────
 
 export const getFormAnalyticsInput = z.object({
   formId: z.string().uuid().describe("Form ID"),
-})
-export type GetFormAnalyticsInputType = z.infer<typeof getFormAnalyticsInput>
+});
+export type GetFormAnalyticsInputType = z.infer<typeof getFormAnalyticsInput>;
 
 export const getSubmissionsListInput = z.object({
   formId: z.string().uuid().describe("Form ID"),
   // Cursor-based pagination — see form-submission/model for the rationale.
-  cursor: z.string().datetime().optional().nullable().describe(
-    "ISO timestamp of the last submission from the previous page"
-  ),
-  limit: z.number().int().min(1).max(200).optional().default(50).describe(
-    "Max submissions to return (default 50, max 200)"
-  ),
-})
-export type GetSubmissionsListInputType = z.infer<typeof getSubmissionsListInput>
+  cursor: z
+    .string()
+    .datetime()
+    .optional()
+    .nullable()
+    .describe("ISO timestamp of the last submission from the previous page"),
+  limit: z
+    .number()
+    .int()
+    .min(1)
+    .max(200)
+    .optional()
+    .default(50)
+    .describe("Max submissions to return (default 50, max 200)"),
+});
+export type GetSubmissionsListInputType = z.infer<typeof getSubmissionsListInput>;
 
 export const recordViewInput = z.object({
   formId: z.string().uuid().describe("Form ID"),
@@ -30,22 +38,22 @@ export const recordViewInput = z.object({
   utmSource: z.string().max(255).optional().nullable(),
   utmMedium: z.string().max(255).optional().nullable(),
   utmCampaign: z.string().max(255).optional().nullable(),
-})
-export type RecordViewInputType = z.infer<typeof recordViewInput>
+});
+export type RecordViewInputType = z.infer<typeof recordViewInput>;
 
 // ─── Shared sub-shapes ────────────────────────────────────────────────────────
 
 export const submissionValueOutput = z.object({
   formFieldId: z.string().uuid(),
   value: z.any(),
-})
+});
 
 export const submissionOutput = z.object({
   id: z.string().uuid(),
   formId: z.string().uuid(),
   values: z.array(submissionValueOutput),
   createdAt: z.any(),
-})
+});
 
 // ─── Analytics output ─────────────────────────────────────────────────────────
 
@@ -56,23 +64,27 @@ export const getFormAnalyticsOutput = z.object({
   completionRate: z.number(), // 0–100 (percent)
 
   // Device breakdown from views
-  deviceViews: z.array(z.object({
-    device: z.string(),
-    count: z.number(),
-  })),
+  deviceViews: z.array(
+    z.object({
+      device: z.string(),
+      count: z.number(),
+    }),
+  ),
 
   // 30-day daily trend (zero-filled)
-  dailyTrends: z.array(z.object({
-    date: z.string(), // "Jun 1"
-    count: z.number(),
-  })),
+  dailyTrends: z.array(
+    z.object({
+      date: z.string(), // "Jun 1"
+      count: z.number(),
+    }),
+  ),
 
   // Derived stats
-  peakDay: z.string().nullable(),      // day of week with most submissions
+  peakDay: z.string().nullable(), // day of week with most submissions
   avgSubmissionsPerDay: z.number(),
   avgSubmissionsPerWeek: z.number(),
-})
-export type GetFormAnalyticsOutputType = z.infer<typeof getFormAnalyticsOutput>
+});
+export type GetFormAnalyticsOutputType = z.infer<typeof getFormAnalyticsOutput>;
 
 // ─── Submissions list output ──────────────────────────────────────────────────
 
@@ -80,15 +92,15 @@ export const getSubmissionsListOutput = z.object({
   submissions: z.array(submissionOutput),
   // null when there are no more pages
   nextCursor: z.string().nullable(),
-})
-export type GetSubmissionsListOutputType = z.infer<typeof getSubmissionsListOutput>
+});
+export type GetSubmissionsListOutputType = z.infer<typeof getSubmissionsListOutput>;
 
 // ─── Record view ──────────────────────────────────────────────────────────────
 
 export const recordViewOutput = z.object({
   success: z.boolean(),
-})
-export type RecordViewOutputType = z.infer<typeof recordViewOutput>
+});
+export type RecordViewOutputType = z.infer<typeof recordViewOutput>;
 
 // ─── Record field answer ──────────────────────────────────────────────────────
 
@@ -96,20 +108,20 @@ export const recordFieldAnswerInput = z.object({
   formId: z.string().uuid(),
   fieldId: z.string().uuid(),
   value: z.any(), // the answer the visitor entered
-})
-export type RecordFieldAnswerInputType = z.infer<typeof recordFieldAnswerInput>
+});
+export type RecordFieldAnswerInputType = z.infer<typeof recordFieldAnswerInput>;
 
 export const recordFieldAnswerOutput = z.object({
   success: z.boolean(),
-})
-export type RecordFieldAnswerOutputType = z.infer<typeof recordFieldAnswerOutput>
+});
+export type RecordFieldAnswerOutputType = z.infer<typeof recordFieldAnswerOutput>;
 
 // ─── Pro analytics ────────────────────────────────────────────────────────────
 
 export const getProAnalyticsInput = z.object({
   formId: z.string().uuid().describe("Form ID"),
-})
-export type GetProAnalyticsInputType = z.infer<typeof getProAnalyticsInput>
+});
+export type GetProAnalyticsInputType = z.infer<typeof getProAnalyticsInput>;
 
 export const questionDistributionOutput = z.object({
   fieldId: z.string().uuid(),
@@ -117,24 +129,32 @@ export const questionDistributionOutput = z.object({
   fieldType: z.string(),
   totalAnswered: z.number(),
   // For SELECT/CHECKBOX/RADIO: answer → count
-  optionCounts: z.array(z.object({
-    value: z.string(),
-    count: z.number(),
-    percent: z.number(),
-  })).optional(),
+  optionCounts: z
+    .array(
+      z.object({
+        value: z.string(),
+        count: z.number(),
+        percent: z.number(),
+      }),
+    )
+    .optional(),
   // For RATING: average score
   averageRating: z.number().optional(),
   // For RATING: distribution per star value (1–5)
-  ratingDistribution: z.array(z.object({
-    rating: z.number(),
-    count: z.number(),
-    percent: z.number(),
-  })).optional(),
+  ratingDistribution: z
+    .array(
+      z.object({
+        rating: z.number(),
+        count: z.number(),
+        percent: z.number(),
+      }),
+    )
+    .optional(),
   // For TOGGLE: true/false counts
   toggleCounts: z.object({ yes: z.number(), no: z.number() }).optional(),
   // For TEXT/TEXTAREA/EMAIL/NUMBER/PHONE/URL/DATE/TIME: up to 5 recent samples
   textSamples: z.array(z.string()).optional(),
-})
+});
 
 export const getProAnalyticsOutput = z.object({
   dowBreakdown: z.array(z.object({ day: z.string(), count: z.number() })),
@@ -146,16 +166,18 @@ export const getProAnalyticsOutput = z.object({
   medianResponseTime: z.number().nullable(),
   returningRate: z.number(),
   peakDay: z.string().nullable(),
-  fieldCompletionRates: z.array(z.object({
-    fieldId: z.string(),
-    fieldLabel: z.string(),
-    rate: z.number(),
-  })),
+  fieldCompletionRates: z.array(
+    z.object({
+      fieldId: z.string(),
+      fieldLabel: z.string(),
+      rate: z.number(),
+    }),
+  ),
   // Avg time to complete (ms), from timeSpentMs column
   avgTimeSpentMs: z.number().nullable(),
   // Top referrers (domain → count)
   topReferrers: z.array(z.object({ referrer: z.string(), count: z.number() })),
   // UTM source breakdown
   utmSources: z.array(z.object({ source: z.string(), count: z.number() })),
-})
-export type GetProAnalyticsOutputType = z.infer<typeof getProAnalyticsOutput>
+});
+export type GetProAnalyticsOutputType = z.infer<typeof getProAnalyticsOutput>;
diff --git a/packages/services/env.ts b/packages/services/env.ts
index 80a9a59..b3de754 100644
--- a/packages/services/env.ts
+++ b/packages/services/env.ts
@@ -1,7 +1,7 @@
 import { z } from "zod";
 
 const envSchema = z.object({
-JWT_SECRET: z.string().describe('Secret key for JWT tokens')
+  JWT_SECRET: z.string().describe("Secret key for JWT tokens"),
 });
 
 function createEnv(env: NodeJS.ProcessEnv) {
diff --git a/packages/services/form-field/index.ts b/packages/services/form-field/index.ts
index c67ad8d..9f8c200 100644
--- a/packages/services/form-field/index.ts
+++ b/packages/services/form-field/index.ts
@@ -1,201 +1,233 @@
-import { db, eq, and, max } from "@repo/database"
-import { formFieldsTable } from "@repo/database/models/form-field"
-import { requireEditor } from "../form"
+import { db, eq, and, max } from "@repo/database";
+import { formFieldsTable } from "@repo/database/models/form-field";
+import { requireEditor } from "../form";
 import {
-    createFormFieldInput,
-    type CreateFormFieldInputType,
-    updateFormFieldInput,
-    type UpdateFormFieldInputType,
-    deleteFormFieldInput,
-    type DeleteFormFieldInputType,
-    getFormFieldInput,
-    type GetFormFieldInputType,
-    listFormFieldsInput,
-    type ListFormFieldsInputType
-} from "./model"
+  createFormFieldInput,
+  type CreateFormFieldInputType,
+  updateFormFieldInput,
+  type UpdateFormFieldInputType,
+  deleteFormFieldInput,
+  type DeleteFormFieldInputType,
+  getFormFieldInput,
+  type GetFormFieldInputType,
+  listFormFieldsInput,
+  type ListFormFieldsInputType,
+} from "./model";
 
 class FormFieldService {
-    private async getNextIndex(formId: string): Promise<string> {
-        const fields = await db
-            .select({ maxIndex: max(formFieldsTable.index) })
-            .from(formFieldsTable)
-            .where(eq(formFieldsTable.formId, formId))
-
-        const current = fields[0]?.maxIndex
-        const next = current ? parseFloat(current) + 1 : 1
-        return next.toFixed(2)
+  private async getNextIndex(formId: string): Promise<string> {
+    const fields = await db
+      .select({ maxIndex: max(formFieldsTable.index) })
+      .from(formFieldsTable)
+      .where(eq(formFieldsTable.formId, formId));
+
+    const current = fields[0]?.maxIndex;
+    const next = current ? parseFloat(current) + 1 : 1;
+    return next.toFixed(2);
+  }
+
+  public async createFormField(payload: CreateFormFieldInputType & { userId: string }) {
+    const {
+      formId,
+      label,
+      placeholder,
+      isRequired,
+      index: clientIndex,
+      type,
+      options,
+      description,
+    } = await createFormFieldInput.parseAsync(payload);
+
+    await requireEditor(formId, payload.userId);
+
+    const labelKey =
+      label
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/(^-|-$)/g, "") || "field";
+
+    // Honor the client-supplied index when present. The client knows
+    // the order of any batch of new fields it's about to send and ships
+    // unique values; this avoids a race when `handleSave` fires multiple
+    // creates via Promise.all (each parallel call would otherwise read
+    // the same MAX(index) and collide on the unique (form_id, index)
+    // constraint). Fall back to server-computed next index when the
+    // caller doesn't supply one.
+    const index = clientIndex ?? (await this.getNextIndex(formId));
+
+    const insertResult = await db
+      .insert(formFieldsTable)
+      .values({
+        formId,
+        label,
+        labelKey,
+        placeholder: placeholder || undefined,
+        isRequired,
+        index,
+        type,
+        options: options || undefined,
+        description: description || undefined,
+      })
+      .returning({
+        id: formFieldsTable.id,
+      });
+
+    if (!insertResult || insertResult.length === 0 || !insertResult[0]?.id) {
+      throw new Error("Failed to create form field");
     }
 
-    public async createFormField(payload: CreateFormFieldInputType & { userId: string }) {
-        const { formId, label, placeholder, isRequired, index: clientIndex, type, options, description } = await createFormFieldInput.parseAsync(payload)
-
-        await requireEditor(formId, payload.userId)
-
-        const labelKey = label
-            .toLowerCase()
-            .replace(/[^a-z0-9]+/g, "-")
-            .replace(/(^-|-$)/g, "") || "field"
-
-        // Honor the client-supplied index when present. The client knows
-        // the order of any batch of new fields it's about to send and ships
-        // unique values; this avoids a race when `handleSave` fires multiple
-        // creates via Promise.all (each parallel call would otherwise read
-        // the same MAX(index) and collide on the unique (form_id, index)
-        // constraint). Fall back to server-computed next index when the
-        // caller doesn't supply one.
-        const index = clientIndex ?? (await this.getNextIndex(formId))
-
-        const insertResult = await db.insert(formFieldsTable).values({
-            formId,
-            label,
-            labelKey,
-            placeholder: placeholder || undefined,
-            isRequired,
-            index,
-            type,
-            options: options || undefined,
-            description: description || undefined
-        }).returning({
-            id: formFieldsTable.id
-        })
-
-        if (!insertResult || insertResult.length === 0 || !insertResult[0]?.id) {
-            throw new Error("Failed to create form field")
-        }
-
-        return {
-            id: insertResult[0].id,
-            labelKey,
-            index
-        }
+    return {
+      id: insertResult[0].id,
+      labelKey,
+      index,
+    };
+  }
+
+  public async updateFormField(payload: UpdateFormFieldInputType & { userId: string }) {
+    const {
+      id,
+      label,
+      placeholder,
+      isRequired,
+      index,
+      type,
+      options,
+      description,
+      expectedVersion,
+    } = await updateFormFieldInput.parseAsync(payload);
+
+    const existingFieldResult = await db
+      .select()
+      .from(formFieldsTable)
+      .where(eq(formFieldsTable.id, id));
+    const existingField = existingFieldResult[0];
+    if (!existingField) {
+      throw new Error("Form field not found");
     }
 
-    public async updateFormField(payload: UpdateFormFieldInputType & { userId: string }) {
-        const { id, label, placeholder, isRequired, index, type, options, description, expectedVersion } = await updateFormFieldInput.parseAsync(payload)
-
-        const existingFieldResult = await db.select().from(formFieldsTable).where(eq(formFieldsTable.id, id))
-        const existingField = existingFieldResult[0]
-        if (!existingField) {
-            throw new Error("Form field not found")
-        }
-
-        await requireEditor(existingField.formId, payload.userId)
-
-        // Optimistic-lock check — if the caller supplied an expected version
-        // and the row has since moved past it, another client wrote first.
-        // We surface a recognisable conflict so the caller can resolve.
-        if (expectedVersion !== undefined && existingField.version !== expectedVersion) {
-            throw new Error(
-                `Form field was modified by someone else (expected version ${expectedVersion}, got ${existingField.version}). Reload and try again.`
-            )
-        }
-
-        let newLabelKey: string | undefined = undefined
-        const currentLabel = label !== undefined ? label : existingField.label
-        const isCurrentlyUntitledKey = existingField.labelKey.startsWith("untitled") || existingField.labelKey === "field"
-        const isNewCustomLabel = currentLabel !== "" && !currentLabel.toLowerCase().startsWith("untitled")
-
-        if (isCurrentlyUntitledKey && isNewCustomLabel) {
-            newLabelKey = currentLabel
-                .toLowerCase()
-                .replace(/[^a-z0-9]+/g, "-")
-                .replace(/(^-|-$)/g, "") || "field"
-        }
-
-        // Conditional update — set the new values AND bump the version, but
-        // only where the version still matches what the client expected.
-        // Returning 0 rows here means another writer raced us; we surface a
-        // conflict so the caller can refetch.
-        const updateResult = await db.update(formFieldsTable)
-            .set({
-                ...(label !== undefined ? { label } : {}),
-                ...(newLabelKey !== undefined ? { labelKey: newLabelKey } : {}),
-                ...(placeholder !== undefined ? { placeholder } : {}),
-                ...(isRequired !== undefined ? { isRequired } : {}),
-                ...(index !== undefined ? { index } : {}),
-                ...(type !== undefined ? { type } : {}),
-                ...(options !== undefined ? { options } : {}),
-                ...(description !== undefined ? { description } : {}),
-                version: existingField.version + 1,
-            })
-            .where(
-                expectedVersion !== undefined
-                    ? and(
-                        eq(formFieldsTable.id, id),
-                        eq(formFieldsTable.version, expectedVersion)
-                    )
-                    : eq(formFieldsTable.id, id)
-            )
-            .returning({
-                id: formFieldsTable.id,
-                version: formFieldsTable.version,
-            })
-
-        if (!updateResult || updateResult.length === 0 || !updateResult[0]?.id) {
-            // Either the row vanished (deleted concurrently) or the version
-            // didn't match (someone else wrote between our read and write).
-            throw new Error("Update raced with another change — please retry")
-        }
-
-        return {
-            id: updateResult[0].id,
-            version: updateResult[0].version,
-        }
+    await requireEditor(existingField.formId, payload.userId);
+
+    // Optimistic-lock check — if the caller supplied an expected version
+    // and the row has since moved past it, another client wrote first.
+    // We surface a recognisable conflict so the caller can resolve.
+    if (expectedVersion !== undefined && existingField.version !== expectedVersion) {
+      throw new Error(
+        `Form field was modified by someone else (expected version ${expectedVersion}, got ${existingField.version}). Reload and try again.`,
+      );
     }
 
-    public async deleteFormField(payload: DeleteFormFieldInputType & { userId: string }) {
-        const { id } = await deleteFormFieldInput.parseAsync(payload)
+    let newLabelKey: string | undefined = undefined;
+    const currentLabel = label !== undefined ? label : existingField.label;
+    const isCurrentlyUntitledKey =
+      existingField.labelKey.startsWith("untitled") || existingField.labelKey === "field";
+    const isNewCustomLabel =
+      currentLabel !== "" && !currentLabel.toLowerCase().startsWith("untitled");
+
+    if (isCurrentlyUntitledKey && isNewCustomLabel) {
+      newLabelKey =
+        currentLabel
+          .toLowerCase()
+          .replace(/[^a-z0-9]+/g, "-")
+          .replace(/(^-|-$)/g, "") || "field";
+    }
 
-        const existingFieldResult = await db.select().from(formFieldsTable).where(eq(formFieldsTable.id, id))
-        const existingField = existingFieldResult[0]
-        if (!existingField) {
-            throw new Error("Form field not found")
-        }
+    // Conditional update — set the new values AND bump the version, but
+    // only where the version still matches what the client expected.
+    // Returning 0 rows here means another writer raced us; we surface a
+    // conflict so the caller can refetch.
+    const updateResult = await db
+      .update(formFieldsTable)
+      .set({
+        ...(label !== undefined ? { label } : {}),
+        ...(newLabelKey !== undefined ? { labelKey: newLabelKey } : {}),
+        ...(placeholder !== undefined ? { placeholder } : {}),
+        ...(isRequired !== undefined ? { isRequired } : {}),
+        ...(index !== undefined ? { index } : {}),
+        ...(type !== undefined ? { type } : {}),
+        ...(options !== undefined ? { options } : {}),
+        ...(description !== undefined ? { description } : {}),
+        version: existingField.version + 1,
+      })
+      .where(
+        expectedVersion !== undefined
+          ? and(eq(formFieldsTable.id, id), eq(formFieldsTable.version, expectedVersion))
+          : eq(formFieldsTable.id, id),
+      )
+      .returning({
+        id: formFieldsTable.id,
+        version: formFieldsTable.version,
+      });
+
+    if (!updateResult || updateResult.length === 0 || !updateResult[0]?.id) {
+      // Either the row vanished (deleted concurrently) or the version
+      // didn't match (someone else wrote between our read and write).
+      throw new Error("Update raced with another change — please retry");
+    }
 
-        await requireEditor(existingField.formId, payload.userId)
+    return {
+      id: updateResult[0].id,
+      version: updateResult[0].version,
+    };
+  }
+
+  public async deleteFormField(payload: DeleteFormFieldInputType & { userId: string }) {
+    const { id } = await deleteFormFieldInput.parseAsync(payload);
+
+    const existingFieldResult = await db
+      .select()
+      .from(formFieldsTable)
+      .where(eq(formFieldsTable.id, id));
+    const existingField = existingFieldResult[0];
+    if (!existingField) {
+      throw new Error("Form field not found");
+    }
 
-        const deleteResult = await db.delete(formFieldsTable)
-            .where(eq(formFieldsTable.id, id))
-            .returning({
-                id: formFieldsTable.id
-            })
+    await requireEditor(existingField.formId, payload.userId);
 
-        if (!deleteResult || deleteResult.length === 0 || !deleteResult[0]?.id) {
-            throw new Error("Failed to delete form field or field not found")
-        }
+    const deleteResult = await db
+      .delete(formFieldsTable)
+      .where(eq(formFieldsTable.id, id))
+      .returning({
+        id: formFieldsTable.id,
+      });
 
-        return {
-            success: true
-        }
+    if (!deleteResult || deleteResult.length === 0 || !deleteResult[0]?.id) {
+      throw new Error("Failed to delete form field or field not found");
     }
 
-    public async getFormField(payload: GetFormFieldInputType & { userId: string }) {
-        const { id } = await getFormFieldInput.parseAsync(payload)
+    return {
+      success: true,
+    };
+  }
 
-        const result = await db.select().from(formFieldsTable).where(eq(formFieldsTable.id, id))
-        const field = result[0]
+  public async getFormField(payload: GetFormFieldInputType & { userId: string }) {
+    const { id } = await getFormFieldInput.parseAsync(payload);
 
-        if (!field) {
-            throw new Error("Form field not found")
-        }
+    const result = await db.select().from(formFieldsTable).where(eq(formFieldsTable.id, id));
+    const field = result[0];
 
-        await requireEditor(field.formId, payload.userId)
-
-        return field
+    if (!field) {
+      throw new Error("Form field not found");
     }
 
-    public async listFormFields(payload: ListFormFieldsInputType & { userId: string }) {
-        const { formId } = await listFormFieldsInput.parseAsync(payload)
+    await requireEditor(field.formId, payload.userId);
 
-        await requireEditor(formId, payload.userId)
+    return field;
+  }
 
-        const result = await db.select()
-            .from(formFieldsTable)
-            .where(eq(formFieldsTable.formId, formId))
-            .orderBy(formFieldsTable.index)
+  public async listFormFields(payload: ListFormFieldsInputType & { userId: string }) {
+    const { formId } = await listFormFieldsInput.parseAsync(payload);
 
-        return result
-    }
+    await requireEditor(formId, payload.userId);
+
+    const result = await db
+      .select()
+      .from(formFieldsTable)
+      .where(eq(formFieldsTable.formId, formId))
+      .orderBy(formFieldsTable.index);
+
+    return result;
+  }
 }
 
-export default FormFieldService
+export default FormFieldService;
diff --git a/packages/services/form-field/model.ts b/packages/services/form-field/model.ts
index 8d1f8d0..3f91fe7 100644
--- a/packages/services/form-field/model.ts
+++ b/packages/services/form-field/model.ts
@@ -1,105 +1,127 @@
-import { z } from 'zod'
+import { z } from "zod";
 
 export const fieldTypeZodEnum = z.enum([
-    'TEXT',
-    'TEXTAREA',
-    'NUMBER',
-    'EMAIL',
-    'PHONE',
-    'URL',
-    'SELECT',
-    'RADIO',
-    'CHECKBOX',
-    'DATE',
-    'RATING',
-    'FILE_UPLOAD',
-    'TIME',
-    'DATETIME',
-    'SLIDER',
-    'TOGGLE'
-])
+  "TEXT",
+  "TEXTAREA",
+  "NUMBER",
+  "EMAIL",
+  "PHONE",
+  "URL",
+  "SELECT",
+  "RADIO",
+  "CHECKBOX",
+  "DATE",
+  "RATING",
+  "FILE_UPLOAD",
+  "TIME",
+  "DATETIME",
+  "SLIDER",
+  "TOGGLE",
+]);
 
 export const createFormFieldInput = z.object({
-    formId: z.string().uuid().describe("ID of the parent form"),
-    label: z.string().trim().max(255, "Label is too long"),
-    placeholder: z.string().trim().max(255).optional().nullable(),
-    isRequired: z.boolean().default(false),
-    index: z.union([z.number(), z.string()]).transform(val => String(val)).optional().describe("Fractional index for sorting"),
-    type: fieldTypeZodEnum.describe("Type of the field"),
-    options: z.any().optional().nullable().describe("Options for select/radio/checkbox in JSON"),
-    description: z.string().trim().max(2000).optional().nullable().describe("Help text or description")
-})
+  formId: z.string().uuid().describe("ID of the parent form"),
+  label: z.string().trim().max(255, "Label is too long"),
+  placeholder: z.string().trim().max(255).optional().nullable(),
+  isRequired: z.boolean().default(false),
+  index: z
+    .union([z.number(), z.string()])
+    .transform((val) => String(val))
+    .optional()
+    .describe("Fractional index for sorting"),
+  type: fieldTypeZodEnum.describe("Type of the field"),
+  options: z.any().optional().nullable().describe("Options for select/radio/checkbox in JSON"),
+  description: z
+    .string()
+    .trim()
+    .max(2000)
+    .optional()
+    .nullable()
+    .describe("Help text or description"),
+});
 
 export const updateFormFieldInput = z.object({
-    id: z.string().uuid().describe("ID of the field to update"),
-    label: z.string().trim().max(255).optional(),
-    placeholder: z.string().trim().max(255).optional().nullable(),
-    isRequired: z.boolean().optional(),
-    index: z.union([z.number(), z.string()]).transform(val => String(val)).optional().describe("Fractional index for sorting"),
-    // Optimistic-lock version. When supplied, the service must match it
-    // against the row's current version (see form-field service for the
-    // conditional update).
-    expectedVersion: z.number().int().nonnegative().optional().describe(
-      "Optimistic-lock token returned by the previous read of this field"
-    ),
-    type: fieldTypeZodEnum.optional().describe("Type of the field"),
-    options: z.any().optional().nullable().describe("Options for select/radio/checkbox in JSON"),
-    description: z.string().trim().max(2000).optional().nullable().describe("Help text or description")
-})
+  id: z.string().uuid().describe("ID of the field to update"),
+  label: z.string().trim().max(255).optional(),
+  placeholder: z.string().trim().max(255).optional().nullable(),
+  isRequired: z.boolean().optional(),
+  index: z
+    .union([z.number(), z.string()])
+    .transform((val) => String(val))
+    .optional()
+    .describe("Fractional index for sorting"),
+  // Optimistic-lock version. When supplied, the service must match it
+  // against the row's current version (see form-field service for the
+  // conditional update).
+  expectedVersion: z
+    .number()
+    .int()
+    .nonnegative()
+    .optional()
+    .describe("Optimistic-lock token returned by the previous read of this field"),
+  type: fieldTypeZodEnum.optional().describe("Type of the field"),
+  options: z.any().optional().nullable().describe("Options for select/radio/checkbox in JSON"),
+  description: z
+    .string()
+    .trim()
+    .max(2000)
+    .optional()
+    .nullable()
+    .describe("Help text or description"),
+});
 
 export const deleteFormFieldInput = z.object({
-    id: z.string().uuid().describe("ID of the field to delete")
-})
+  id: z.string().uuid().describe("ID of the field to delete"),
+});
 
-export type CreateFormFieldInputType = z.infer<typeof createFormFieldInput>
-export type UpdateFormFieldInputType = z.infer<typeof updateFormFieldInput>
-export type DeleteFormFieldInputType = z.infer<typeof deleteFormFieldInput>
+export type CreateFormFieldInputType = z.infer<typeof createFormFieldInput>;
+export type UpdateFormFieldInputType = z.infer<typeof updateFormFieldInput>;
+export type DeleteFormFieldInputType = z.infer<typeof deleteFormFieldInput>;
 
 export const createFormFieldOutput = z.object({
-    id: z.string().uuid().describe("ID of the created form field")
-})
+  id: z.string().uuid().describe("ID of the created form field"),
+});
 
 export const updateFormFieldOutput = z.object({
-    id: z.string().uuid().describe("ID of the updated form field"),
-    version: z.number().int().describe("New optimistic-lock version after the update")
-})
+  id: z.string().uuid().describe("ID of the updated form field"),
+  version: z.number().int().describe("New optimistic-lock version after the update"),
+});
 
 export const deleteFormFieldOutput = z.object({
-    success: z.boolean().describe("Whether deletion was successful")
-})
+  success: z.boolean().describe("Whether deletion was successful"),
+});
 
-export type CreateFormFieldOutputType = z.infer<typeof createFormFieldOutput>
-export type UpdateFormFieldOutputType = z.infer<typeof updateFormFieldOutput>
-export type DeleteFormFieldOutputType = z.infer<typeof deleteFormFieldOutput>
+export type CreateFormFieldOutputType = z.infer<typeof createFormFieldOutput>;
+export type UpdateFormFieldOutputType = z.infer<typeof updateFormFieldOutput>;
+export type DeleteFormFieldOutputType = z.infer<typeof deleteFormFieldOutput>;
 
 export const getFormFieldInput = z.object({
-    id: z.string().uuid().describe("ID of the field to retrieve")
-})
+  id: z.string().uuid().describe("ID of the field to retrieve"),
+});
 
 export const getFormFieldOutput = z.object({
-    id: z.string().uuid().describe("ID of the form field"),
-    formId: z.string().uuid().describe("ID of the parent form"),
-    label: z.string().describe("Label of the field"),
-    labelKey: z.string().describe("Immutable slug key of the field"),
-    placeholder: z.string().nullable().optional().describe("Placeholder of the field"),
-    isRequired: z.boolean().describe("Whether field is required"),
-    index: z.string().describe("Fractional index for sorting"),
-    type: fieldTypeZodEnum.describe("Type of the field"),
-    options: z.any().nullable().optional().describe("Options in JSON format"),
-    description: z.string().nullable().optional().describe("Description or help text"),
-    version: z.number().int().describe("Optimistic-lock version"),
-    createdAt: z.any().describe("Creation timestamp"),
-    updatedAt: z.any().describe("Last update timestamp")
-})
+  id: z.string().uuid().describe("ID of the form field"),
+  formId: z.string().uuid().describe("ID of the parent form"),
+  label: z.string().describe("Label of the field"),
+  labelKey: z.string().describe("Immutable slug key of the field"),
+  placeholder: z.string().nullable().optional().describe("Placeholder of the field"),
+  isRequired: z.boolean().describe("Whether field is required"),
+  index: z.string().describe("Fractional index for sorting"),
+  type: fieldTypeZodEnum.describe("Type of the field"),
+  options: z.any().nullable().optional().describe("Options in JSON format"),
+  description: z.string().nullable().optional().describe("Description or help text"),
+  version: z.number().int().describe("Optimistic-lock version"),
+  createdAt: z.any().describe("Creation timestamp"),
+  updatedAt: z.any().describe("Last update timestamp"),
+});
 
-export type GetFormFieldInputType = z.infer<typeof getFormFieldInput>
-export type GetFormFieldOutputType = z.infer<typeof getFormFieldOutput>
+export type GetFormFieldInputType = z.infer<typeof getFormFieldInput>;
+export type GetFormFieldOutputType = z.infer<typeof getFormFieldOutput>;
 
 export const listFormFieldsInput = z.object({
-    formId: z.string().uuid().describe("ID of the parent form")
-})
-export type ListFormFieldsInputType = z.infer<typeof listFormFieldsInput>
-
-export const listFormFieldsOutput = z.array(getFormFieldOutput)
-export type ListFormFieldsOutputType = z.infer<typeof listFormFieldsOutput>
+  formId: z.string().uuid().describe("ID of the parent form"),
+});
+export type ListFormFieldsInputType = z.infer<typeof listFormFieldsInput>;
 
+export const listFormFieldsOutput = z.array(getFormFieldOutput);
+export type ListFormFieldsOutputType = z.infer<typeof listFormFieldsOutput>;
diff --git a/packages/services/form-submission/index.ts b/packages/services/form-submission/index.ts
index 9384795..762d3c4 100644
--- a/packages/services/form-submission/index.ts
+++ b/packages/services/form-submission/index.ts
@@ -1,35 +1,50 @@
-import { db, eq, and, desc, gte, lt, count, usersTable } from "@repo/database"
-import { formsTable } from "@repo/database/models/form"
-import { formSubmissionsTable } from "@repo/database/models/form-submission"
-import { formViewsTable } from "@repo/database/models/form-view"
+import { db, eq, and, desc, gte, lt, count, usersTable } from "@repo/database";
+import { formsTable } from "@repo/database/models/form";
+import { formSubmissionsTable } from "@repo/database/models/form-submission";
+import { formViewsTable } from "@repo/database/models/form-view";
 import {
   submitFormInput,
   type SubmitFormInputType,
   getSubmissionsInput,
   type GetSubmissionsInputType,
   recordViewInput,
-  type RecordViewInputType
-} from "./model"
+  type RecordViewInputType,
+} from "./model";
 
 // Sentinel error message the client looks for to render the
 // "already submitted" screen instead of a generic toast. Keep this
 // string stable — the public form page matches against it.
-export const ALREADY_SUBMITTED_ERROR = "ALREADY_SUBMITTED"
+export const ALREADY_SUBMITTED_ERROR = "ALREADY_SUBMITTED";
 
 class FormSubmissionService {
   public async submitForm(payload: SubmitFormInputType) {
-    const { formId, values, idempotencyKey, visitorId } = await submitFormInput.parseAsync(payload)
+    const { formId, values, idempotencyKey, visitorId } = await submitFormInput.parseAsync(payload);
 
-    const formResult = await db.select().from(formsTable).where(eq(formsTable.id, formId))
-    const form = formResult[0]
+    const formResult = await db.select().from(formsTable).where(eq(formsTable.id, formId));
+    const form = formResult[0];
     if (!form) {
-      throw new Error("Form not found")
+      throw new Error("Form not found");
     }
     if (!form.isPublished) {
-      throw new Error("Form is not published yet")
+      throw new Error("Form is not published yet");
     }
     if (!form.isOpen) {
-      throw new Error("Form is closed for submissions")
+      throw new Error("Form is closed for submissions");
+    }
+
+    if (form.expiresAt && new Date() > new Date(form.expiresAt)) {
+      throw new Error("Form has expired");
+    }
+
+    if (form.maxSubmissions !== null && form.maxSubmissions !== undefined) {
+      const submissionsCountRows = await db
+        .select({ value: count() })
+        .from(formSubmissionsTable)
+        .where(eq(formSubmissionsTable.formId, formId));
+      const totalSubmissions = Number(submissionsCountRows[0]?.value ?? 0);
+      if (totalSubmissions >= form.maxSubmissions) {
+        throw new Error("Form has reached its submission limit");
+      }
     }
 
     // One-submission-per-visitor enforcement. Visitors who can't write
@@ -43,12 +58,12 @@ class FormSubmissionService {
         .where(
           and(
             eq(formSubmissionsTable.formId, formId),
-            eq(formSubmissionsTable.visitorId, visitorId)
-          )
+            eq(formSubmissionsTable.visitorId, visitorId),
+          ),
         )
-        .limit(1)
+        .limit(1);
       if (prior[0]) {
-        throw new Error(ALREADY_SUBMITTED_ERROR)
+        throw new Error(ALREADY_SUBMITTED_ERROR);
       }
     }
 
@@ -63,27 +78,30 @@ class FormSubmissionService {
         .where(
           and(
             eq(formSubmissionsTable.formId, formId),
-            eq(formSubmissionsTable.idempotencyKey, idempotencyKey)
-          )
+            eq(formSubmissionsTable.idempotencyKey, idempotencyKey),
+          ),
         )
-        .limit(1)
-      const firstExisting = existing[0]
+        .limit(1);
+      const firstExisting = existing[0];
       if (firstExisting) {
-        return { id: firstExisting.id }
+        return { id: firstExisting.id };
       }
     }
 
-    const userResult = await db.select({ plan: usersTable.plan }).from(usersTable).where(eq(usersTable.id, form.ownerId))
-    const userPlan = userResult[0]?.plan || "Free"
+    const userResult = await db
+      .select({ plan: usersTable.plan })
+      .from(usersTable)
+      .where(eq(usersTable.id, form.ownerId));
+    const userPlan = userResult[0]?.plan || "Free";
 
-    let submissionLimit = 1000
-    if (userPlan === "Pro") submissionLimit = 10000
-    else if (userPlan === "Pro+") submissionLimit = 50000
-    else if (userPlan === "Business") submissionLimit = 500000
+    let submissionLimit = 1000;
+    if (userPlan === "Pro") submissionLimit = 10000;
+    else if (userPlan === "Pro+") submissionLimit = 50000;
+    else if (userPlan === "Business") submissionLimit = 500000;
 
-    const startOfMonth = new Date()
-    startOfMonth.setDate(1)
-    startOfMonth.setHours(0, 0, 0, 0)
+    const startOfMonth = new Date();
+    startOfMonth.setDate(1);
+    startOfMonth.setHours(0, 0, 0, 0);
 
     // Count this month's submissions across all of the owner's forms in a
     // single COUNT query (no row materialization).
@@ -94,124 +112,134 @@ class FormSubmissionService {
       .where(
         and(
           eq(formsTable.ownerId, form.ownerId),
-          gte(formSubmissionsTable.createdAt, startOfMonth)
-        )
-      )
+          gte(formSubmissionsTable.createdAt, startOfMonth),
+        ),
+      );
 
-    const monthlyCount = Number(monthCountRows[0]?.value ?? 0)
+    const monthlyCount = Number(monthCountRows[0]?.value ?? 0);
     if (monthlyCount >= submissionLimit) {
-      throw new Error(`This workspace has reached the limit of ${submissionLimit} submissions per month for the ${userPlan} tier.`)
+      throw new Error(
+        `This workspace has reached the limit of ${submissionLimit} submissions per month for the ${userPlan} tier.`,
+      );
     }
 
-    let insertResult
+    let insertResult;
     try {
-      insertResult = await db.insert(formSubmissionsTable).values({
-        formId,
-        values,
-        idempotencyKey: idempotencyKey ?? null,
-        visitorId: visitorId ?? null,
-        referrer: (payload as any).referrer ?? null,
-        utmSource: (payload as any).utmSource ?? null,
-        utmMedium: (payload as any).utmMedium ?? null,
-        utmCampaign: (payload as any).utmCampaign ?? null,
-        timeSpentMs: (payload as any).timeSpentMs ?? null,
-      }).returning({ id: formSubmissionsTable.id })
+      insertResult = await db
+        .insert(formSubmissionsTable)
+        .values({
+          formId,
+          values,
+          idempotencyKey: idempotencyKey ?? null,
+          visitorId: visitorId ?? null,
+          referrer: (payload as any).referrer ?? null,
+          utmSource: (payload as any).utmSource ?? null,
+          utmMedium: (payload as any).utmMedium ?? null,
+          utmCampaign: (payload as any).utmCampaign ?? null,
+          timeSpentMs: (payload as any).timeSpentMs ?? null,
+        })
+        .returning({ id: formSubmissionsTable.id });
     } catch (err: any) {
       // Race condition: two parallel submits from the same visitor can
       // both pass the SELECT check above, then collide on the partial
       // unique index. Translate the Postgres 23505 unique violation
       // back into our sentinel so the client treats it the same way.
-      const code = err?.code ?? err?.cause?.code
-      const msg = (err?.message ?? "") + " " + (err?.detail ?? "")
+      const code = err?.code ?? err?.cause?.code;
+      const msg = (err?.message ?? "") + " " + (err?.detail ?? "");
       if (
         code === "23505" ||
         /form_submissions_form_visitor_idx|form_submissions_form_idempotency_idx/.test(msg)
       ) {
-        throw new Error(ALREADY_SUBMITTED_ERROR)
+        throw new Error(ALREADY_SUBMITTED_ERROR);
       }
-      throw err
+      throw err;
     }
 
-    const firstResult = insertResult[0]
+    const firstResult = insertResult[0];
     if (!firstResult) {
-      throw new Error("Failed to submit form")
+      throw new Error("Failed to submit form");
     }
 
     return {
-      id: firstResult.id
-    }
+      id: firstResult.id,
+    };
   }
 
   public async getSubmissions(payload: GetSubmissionsInputType) {
-    const { formId, ownerId, cursor, limit } = await getSubmissionsInput.parseAsync(payload)
+    const { formId, ownerId, cursor, limit } = await getSubmissionsInput.parseAsync(payload);
 
-    const formResult = await db.select().from(formsTable).where(and(eq(formsTable.id, formId), eq(formsTable.ownerId, ownerId)))
+    const formResult = await db
+      .select()
+      .from(formsTable)
+      .where(and(eq(formsTable.id, formId), eq(formsTable.ownerId, ownerId)));
     if (!formResult[0]) {
-      throw new Error("Form not found or unauthorized")
+      throw new Error("Form not found or unauthorized");
     }
 
     // Build the WHERE for the submissions page. When a cursor is supplied,
     // we paginate by createdAt rather than offset — stable under inserts.
-    const cursorDate = cursor ? new Date(cursor) : null
+    const cursorDate = cursor ? new Date(cursor) : null;
     const whereClause = cursorDate
       ? and(
           eq(formSubmissionsTable.formId, formId),
           // strict < cursor so the cursor row itself doesn't repeat
           // (cursorDate is the createdAt of the LAST row from the prior page).
           // `desc` ordering + `lt` = "older than the cursor".
-          lt(formSubmissionsTable.createdAt, cursorDate)
+          lt(formSubmissionsTable.createdAt, cursorDate),
         )
-      : eq(formSubmissionsTable.formId, formId)
+      : eq(formSubmissionsTable.formId, formId);
 
     // Fetch limit+1 so we know whether there's another page without a
     // second COUNT query.
     const [pageRows, deviceRows] = await Promise.all([
-      db.select()
+      db
+        .select()
         .from(formSubmissionsTable)
         .where(whereClause)
         .orderBy(desc(formSubmissionsTable.createdAt))
         .limit(limit + 1),
-      db.select({ deviceType: formViewsTable.deviceType, value: count() })
+      db
+        .select({ deviceType: formViewsTable.deviceType, value: count() })
         .from(formViewsTable)
         .where(eq(formViewsTable.formId, formId))
         .groupBy(formViewsTable.deviceType),
-    ])
+    ]);
 
-    const hasMore = pageRows.length > limit
-    const submissions = hasMore ? pageRows.slice(0, limit) : pageRows
+    const hasMore = pageRows.length > limit;
+    const submissions = hasMore ? pageRows.slice(0, limit) : pageRows;
     const nextCursor = hasMore
       ? submissions[submissions.length - 1]!.createdAt.toISOString()
-      : null
-
-    const deviceMap = { desktop: 0, mobile: 0, tablet: 0 }
-    let viewsCount = 0
-    deviceRows.forEach(r => {
-      const n = Number(r.value)
-      viewsCount += n
-      const dev = r.deviceType.toLowerCase()
-      if (dev.includes('mobile')) deviceMap.mobile += n
-      else if (dev.includes('tablet')) deviceMap.tablet += n
-      else deviceMap.desktop += n
-    })
+      : null;
+
+    const deviceMap = { desktop: 0, mobile: 0, tablet: 0 };
+    let viewsCount = 0;
+    deviceRows.forEach((r) => {
+      const n = Number(r.value);
+      viewsCount += n;
+      const dev = r.deviceType.toLowerCase();
+      if (dev.includes("mobile")) deviceMap.mobile += n;
+      else if (dev.includes("tablet")) deviceMap.tablet += n;
+      else deviceMap.desktop += n;
+    });
 
     const deviceViews = Object.entries(deviceMap).map(([device, cnt]) => ({
       device,
-      count: cnt
-    }))
+      count: cnt,
+    }));
 
-    return { submissions, nextCursor, viewsCount, deviceViews }
+    return { submissions, nextCursor, viewsCount, deviceViews };
   }
 
   public async recordView(payload: RecordViewInputType) {
-    const { formId, deviceType } = await recordViewInput.parseAsync(payload)
+    const { formId, deviceType } = await recordViewInput.parseAsync(payload);
 
     await db.insert(formViewsTable).values({
       formId,
-      deviceType
-    })
+      deviceType,
+    });
 
-    return { success: true }
+    return { success: true };
   }
 }
 
-export default FormSubmissionService
+export default FormSubmissionService;
diff --git a/packages/services/form-submission/model.ts b/packages/services/form-submission/model.ts
index 2b311f2..a604ee4 100644
--- a/packages/services/form-submission/model.ts
+++ b/packages/services/form-submission/model.ts
@@ -1,9 +1,9 @@
-import { z } from 'zod'
+import { z } from "zod";
 
 export const submitFormValueInput = z.object({
   formFieldId: z.string().uuid(),
-  value: z.any()
-})
+  value: z.any(),
+});
 
 export const submitFormInput = z.object({
   formId: z.string().uuid().describe("ID of the form to submit"),
@@ -23,26 +23,26 @@ export const submitFormInput = z.object({
   utmMedium: z.string().trim().max(255).optional().nullable(),
   utmCampaign: z.string().trim().max(255).optional().nullable(),
   timeSpentMs: z.number().int().optional().nullable(),
-})
-export type SubmitFormInputType = z.infer<typeof submitFormInput>
+});
+export type SubmitFormInputType = z.infer<typeof submitFormInput>;
 
 export const submitFormOutput = z.object({
-  id: z.string().uuid().describe("ID of the created submission")
-})
-export type SubmitFormOutputType = z.infer<typeof submitFormOutput>
+  id: z.string().uuid().describe("ID of the created submission"),
+});
+export type SubmitFormOutputType = z.infer<typeof submitFormOutput>;
 
 export const formSubmissionValueOutput = z.object({
   formFieldId: z.string().uuid(),
-  value: z.any()
-})
+  value: z.any(),
+});
 
 export const formSubmissionOutput = z.object({
   id: z.string().uuid(),
   formId: z.string().uuid(),
   values: z.array(formSubmissionValueOutput),
-  createdAt: z.any()
-})
-export type FormSubmissionOutputType = z.infer<typeof formSubmissionOutput>
+  createdAt: z.any(),
+});
+export type FormSubmissionOutputType = z.infer<typeof formSubmissionOutput>;
 
 export const getSubmissionsInput = z.object({
   formId: z.string().uuid().describe("Form ID"),
@@ -51,14 +51,22 @@ export const getSubmissionsInput = z.object({
   // row from the previous page. The server returns the next page of rows
   // older than that timestamp. Cursor pagination is stable under inserts
   // (unlike offset, which shifts as new rows arrive).
-  cursor: z.string().datetime().optional().nullable().describe(
-    "ISO timestamp of the last submission from the previous page"
-  ),
-  limit: z.number().int().min(1).max(200).optional().default(50).describe(
-    "Max submissions to return (default 50, max 200)"
-  ),
-})
-export type GetSubmissionsInputType = z.infer<typeof getSubmissionsInput>
+  cursor: z
+    .string()
+    .datetime()
+    .optional()
+    .nullable()
+    .describe("ISO timestamp of the last submission from the previous page"),
+  limit: z
+    .number()
+    .int()
+    .min(1)
+    .max(200)
+    .optional()
+    .default(50)
+    .describe("Max submissions to return (default 50, max 200)"),
+});
+export type GetSubmissionsInputType = z.infer<typeof getSubmissionsInput>;
 
 export const getSubmissionsOutput = z.object({
   submissions: z.array(formSubmissionOutput),
@@ -66,20 +74,22 @@ export const getSubmissionsOutput = z.object({
   // this was the final page).
   nextCursor: z.string().nullable(),
   viewsCount: z.number(),
-  deviceViews: z.array(z.object({
-    device: z.string(),
-    count: z.number()
-  }))
-})
-export type GetSubmissionsOutputType = z.infer<typeof getSubmissionsOutput>
+  deviceViews: z.array(
+    z.object({
+      device: z.string(),
+      count: z.number(),
+    }),
+  ),
+});
+export type GetSubmissionsOutputType = z.infer<typeof getSubmissionsOutput>;
 
 export const recordViewInput = z.object({
   formId: z.string().uuid().describe("Form ID"),
-  deviceType: z.string().describe("Device type (mobile, tablet, desktop)")
-})
-export type RecordViewInputType = z.infer<typeof recordViewInput>
+  deviceType: z.string().describe("Device type (mobile, tablet, desktop)"),
+});
+export type RecordViewInputType = z.infer<typeof recordViewInput>;
 
 export const recordViewOutput = z.object({
-  success: z.boolean()
-})
-export type RecordViewOutputType = z.infer<typeof recordViewOutput>
+  success: z.boolean(),
+});
+export type RecordViewOutputType = z.infer<typeof recordViewOutput>;
diff --git a/packages/services/form/index.ts b/packages/services/form/index.ts
index eba6caa..f3fa124 100644
--- a/packages/services/form/index.ts
+++ b/packages/services/form/index.ts
@@ -1,8 +1,8 @@
-import { db, eq, and, gte, count, sql, usersTable } from "@repo/database"
-import { formsTable } from "@repo/database/models/form"
-import { formFieldsTable } from "@repo/database/models/form-field"
-import { formSubmissionsTable } from "@repo/database/models/form-submission"
-import { formCollaboratorsTable } from "@repo/database/models/form-collaborator"
+import { db, eq, and, gte, count, sql, usersTable } from "@repo/database";
+import { formsTable } from "@repo/database/models/form";
+import { formFieldsTable } from "@repo/database/models/form-field";
+import { formSubmissionsTable } from "@repo/database/models/form-submission";
+import { formCollaboratorsTable } from "@repo/database/models/form-collaborator";
 
 import {
   createFormInput,
@@ -25,9 +25,11 @@ import {
   type RemoveCollaboratorInputType,
   transferOwnershipInput,
   type TransferOwnershipInputType,
+  updateFormSettingsInput,
+  type UpdateFormSettingsInputType,
   type FormRole,
-  type FormPermissions
-} from "./model"
+  type FormPermissions,
+} from "./model";
 
 export async function checkFormAccess(formId: string, userId: string): Promise<FormRole | null> {
   const access = await db
@@ -40,51 +42,51 @@ export async function checkFormAccess(formId: string, userId: string): Promise<F
       formCollaboratorsTable,
       and(
         eq(formCollaboratorsTable.formId, formsTable.id),
-        eq(formCollaboratorsTable.userId, userId)
-      )
+        eq(formCollaboratorsTable.userId, userId),
+      ),
     )
     .where(eq(formsTable.id, formId))
-    .limit(1)
+    .limit(1);
 
-  const form = access[0]
-  if (!form) return null
+  const form = access[0];
+  if (!form) return null;
 
-  if (form.ownerId === userId) return "owner"
-  if (form.collaboratorRole) return form.collaboratorRole as FormRole
+  if (form.ownerId === userId) return "owner";
+  if (form.collaboratorRole) return form.collaboratorRole as FormRole;
 
-  return null
+  return null;
 }
 
 export async function requireOwner(formId: string, userId: string): Promise<void> {
-  const role = await checkFormAccess(formId, userId)
+  const role = await checkFormAccess(formId, userId);
   if (role !== "owner") {
-    throw new Error("Unauthorized: Owner access required")
+    throw new Error("Unauthorized: Owner access required");
   }
 }
 
 export async function requireEditor(formId: string, userId: string): Promise<void> {
-  const role = await checkFormAccess(formId, userId)
+  const role = await checkFormAccess(formId, userId);
   if (role !== "owner" && role !== "editor") {
-    throw new Error("Unauthorized: Editor access required")
+    throw new Error("Unauthorized: Editor access required");
   }
 }
 
 export async function requireViewer(formId: string, userId: string): Promise<void> {
-  const role = await checkFormAccess(formId, userId)
+  const role = await checkFormAccess(formId, userId);
   if (role !== "owner" && role !== "editor" && role !== "viewer") {
-    throw new Error("Unauthorized: Viewer access required")
+    throw new Error("Unauthorized: Viewer access required");
   }
 }
 
 export function getFormPermissions(role: FormRole | null): FormPermissions {
-  const isOwner = role === "owner"
-  const isEditor = role === "editor"
-  const isViewer = role === "viewer"
+  const isOwner = role === "owner";
+  const isEditor = role === "editor";
+  const isViewer = role === "viewer";
 
-  const hasBuilderView = isOwner || isEditor
-  const hasBuilderEdit = isOwner || isEditor
-  const hasAnalyticsView = isOwner || isEditor || isViewer
-  const hasResponsesView = isOwner || isEditor || isViewer
+  const hasBuilderView = isOwner || isEditor;
+  const hasBuilderEdit = isOwner || isEditor;
+  const hasAnalyticsView = isOwner || isEditor || isViewer;
+  const hasResponsesView = isOwner || isEditor || isViewer;
 
   return {
     builder: {
@@ -103,24 +105,23 @@ export function getFormPermissions(role: FormRole | null): FormPermissions {
       canArchive: isOwner,
       canShare: isOwner,
     },
-  }
+  };
 }
 
-
 class FormService {
   private async getFormBySlug(slug: string) {
-    const result = await db.select().from(formsTable).where(eq(formsTable.slug, slug))
-    if (!result || result.length === 0) return null
-    return result[0]
+    const result = await db.select().from(formsTable).where(eq(formsTable.slug, slug));
+    if (!result || result.length === 0) return null;
+    return result[0];
   }
 
   public async getForm(payload: GetFormInputType & { userId: string }) {
-    const { id } = await getFormInput.parseAsync(payload)
-    const { userId } = payload
+    const { id } = await getFormInput.parseAsync(payload);
+    const { userId } = payload;
 
-    const role = await checkFormAccess(id, userId)
+    const role = await checkFormAccess(id, userId);
     if (!role) {
-      throw new Error("Form not found or unauthorized")
+      throw new Error("Form not found or unauthorized");
     }
 
     const result = await db
@@ -130,77 +131,80 @@ class FormService {
       })
       .from(formsTable)
       .innerJoin(usersTable, eq(formsTable.ownerId, usersTable.id))
-      .where(eq(formsTable.id, id))
+      .where(eq(formsTable.id, id));
 
-    const row = result[0]
+    const row = result[0];
     if (!row) {
-      throw new Error("Form not found")
+      throw new Error("Form not found");
     }
 
     return {
       ...row.form,
       ownerEmail: row.ownerEmail,
       role,
-      permissions: getFormPermissions(role)
-    }
+      permissions: getFormPermissions(role),
+    };
   }
 
   public async createForm(payload: CreateFormInputType) {
-    const { title, description, slug, ownerId } = await createFormInput.parseAsync(payload)
+    const { title, description, slug, ownerId } = await createFormInput.parseAsync(payload);
 
-    const userResult = await db.select({ plan: usersTable.plan }).from(usersTable).where(eq(usersTable.id, ownerId))
-    const userPlan = userResult[0]?.plan || "Free"
+    const userResult = await db
+      .select({ plan: usersTable.plan })
+      .from(usersTable)
+      .where(eq(usersTable.id, ownerId));
+    const userPlan = userResult[0]?.plan || "Free";
 
-    let formLimit = 10
-    if (userPlan === "Pro") formLimit = 50
-    else if (userPlan === "Pro+") formLimit = 200
-    else if (userPlan === "Business") formLimit = Infinity
+    let formLimit = 10;
+    if (userPlan === "Pro") formLimit = 50;
+    else if (userPlan === "Pro+") formLimit = 200;
+    else if (userPlan === "Business") formLimit = Infinity;
 
     if (formLimit !== Infinity) {
-      const startOfMonth = new Date()
-      startOfMonth.setDate(1)
-      startOfMonth.setHours(0, 0, 0, 0)
+      const startOfMonth = new Date();
+      startOfMonth.setDate(1);
+      startOfMonth.setHours(0, 0, 0, 0);
 
       const existingForms = await db
         .select({ value: count() })
         .from(formsTable)
-        .where(
-          and(
-            eq(formsTable.ownerId, ownerId),
-            gte(formsTable.createdAt, startOfMonth)
-          )
-        )
+        .where(and(eq(formsTable.ownerId, ownerId), gte(formsTable.createdAt, startOfMonth)));
 
       if (Number(existingForms[0]?.value ?? 0) >= formLimit) {
-        throw new Error(`You have reached the limit of ${formLimit} forms per month for the ${userPlan} tier.`)
+        throw new Error(
+          `You have reached the limit of ${formLimit} forms per month for the ${userPlan} tier.`,
+        );
       }
     }
 
-    const existingForm = await this.getFormBySlug(slug)
+    const existingForm = await this.getFormBySlug(slug);
     if (existingForm) {
-      throw new Error(`Form with slug ${slug} already exists`)
+      throw new Error(`Form with slug ${slug} already exists`);
     }
 
-    const insertResult = await db.insert(formsTable).values({
-      title,
-      description,
-      slug,
-      ownerId
-    }).returning({
-      id: formsTable.id
-    })
+    const insertResult = await db
+      .insert(formsTable)
+      .values({
+        title,
+        description,
+        slug,
+        ownerId,
+      })
+      .returning({
+        id: formsTable.id,
+      });
 
     if (!insertResult || insertResult.length === 0 || !insertResult[0]?.id) {
-      throw new Error(`Failed to create form`)
+      throw new Error(`Failed to create form`);
     }
 
     return {
-      id: insertResult[0].id
-    }
+      id: insertResult[0].id,
+    };
   }
 
   public async listFormsByUserId(payload: ListFormsByUserIdInputType) {
-    const { userId } = await listFormsByUserIdInput.parseAsync(payload)
+    const { userId } = await listFormsByUserIdInput.parseAsync(payload);
 
     const forms = await db
       .select({
@@ -221,15 +225,19 @@ class FormService {
       })
       .from(formsTable)
       .leftJoin(formSubmissionsTable, eq(formsTable.id, formSubmissionsTable.formId))
-      .leftJoin(formCollaboratorsTable, and(eq(formsTable.id, formCollaboratorsTable.formId), eq(formCollaboratorsTable.userId, userId)))
-      .leftJoin(usersTable, eq(formsTable.ownerId, usersTable.id))
-      .where(
-        sql`${formsTable.ownerId} = ${userId} OR ${formCollaboratorsTable.userId} = ${userId}`
+      .leftJoin(
+        formCollaboratorsTable,
+        and(
+          eq(formsTable.id, formCollaboratorsTable.formId),
+          eq(formCollaboratorsTable.userId, userId),
+        ),
       )
-      .groupBy(formsTable.id, formCollaboratorsTable.role, usersTable.email)
+      .leftJoin(usersTable, eq(formsTable.ownerId, usersTable.id))
+      .where(sql`${formsTable.ownerId} = ${userId} OR ${formCollaboratorsTable.userId} = ${userId}`)
+      .groupBy(formsTable.id, formCollaboratorsTable.role, usersTable.email);
 
-    return forms.map(f => {
-      const role: FormRole = f.ownerId === userId ? "owner" : (f.collaboratorRole as FormRole)
+    return forms.map((f) => {
+      const role: FormRole = f.ownerId === userId ? "owner" : (f.collaboratorRole as FormRole);
       return {
         id: f.id,
         title: f.title,
@@ -244,13 +252,13 @@ class FormService {
         submissionsCount: f.submissionsCount,
         ownerEmail: f.ownerEmail,
         role,
-        permissions: getFormPermissions(role)
-      }
-    })
+        permissions: getFormPermissions(role),
+      };
+    });
   }
 
   public async getFormById(payload: GetFormInputType) {
-    const { id } = await getFormInput.parseAsync(payload)
+    const { id } = await getFormInput.parseAsync(payload);
 
     const rows = await db
       .select({
@@ -260,79 +268,88 @@ class FormService {
       .from(formsTable)
       .leftJoin(formFieldsTable, eq(formsTable.id, formFieldsTable.formId))
       .where(eq(formsTable.id, id))
-      .orderBy(formFieldsTable.index)
+      .orderBy(formFieldsTable.index);
 
-    const firstRow = rows[0]
+    const firstRow = rows[0];
     if (!firstRow) {
-      throw new Error("Form not found")
+      throw new Error("Form not found");
     }
 
-    const form = firstRow.form
+    const submissionsCountRows = await db
+      .select({ value: count() })
+      .from(formSubmissionsTable)
+      .where(eq(formSubmissionsTable.formId, id));
+    const submissionsCount = Number(submissionsCountRows[0]?.value ?? 0);
+
+    const form = firstRow.form;
     const fields = rows
       .map((r) => r.field)
-      .filter((f): f is NonNullable<typeof f> => !!(f && f.id))
+      .filter((f): f is NonNullable<typeof f> => !!(f && f.id));
 
     return {
       ...form,
       fields,
+      submissionsCount,
       role: undefined,
-      permissions: undefined
-    }
+      permissions: undefined,
+    };
   }
 
   public async publishForm(payload: GetFormInputType & { ownerId: string }) {
-    const { id } = await getFormInput.parseAsync(payload)
-    const { ownerId: userId } = payload
+    const { id } = await getFormInput.parseAsync(payload);
+    const { ownerId: userId } = payload;
 
-    await requireEditor(id, userId)
+    await requireEditor(id, userId);
 
-    const result = await db.update(formsTable)
+    const result = await db
+      .update(formsTable)
       .set({
         isPublished: true,
-        publishedAt: new Date()
+        publishedAt: new Date(),
       })
       .where(eq(formsTable.id, id))
       .returning({
-        id: formsTable.id
-      })
+        id: formsTable.id,
+      });
 
-    const firstResult = result[0]
+    const firstResult = result[0];
     if (!firstResult) {
-      throw new Error("Form not found")
+      throw new Error("Form not found");
     }
 
     return {
-      id: firstResult.id
-    }
+      id: firstResult.id,
+    };
   }
 
   public async deleteForm(payload: DeleteFormInputType & { ownerId: string }) {
-    const { id } = await deleteFormInput.parseAsync(payload)
-    const { ownerId: userId } = payload
+    const { id } = await deleteFormInput.parseAsync(payload);
+    const { ownerId: userId } = payload;
 
-    await requireOwner(id, userId)
+    await requireOwner(id, userId);
 
-    const result = await db.delete(formsTable)
+    const result = await db
+      .delete(formsTable)
       .where(eq(formsTable.id, id))
-      .returning({ id: formsTable.id })
+      .returning({ id: formsTable.id });
 
-    if (!result[0]) throw new Error("Form not found")
+    if (!result[0]) throw new Error("Form not found");
 
-    return { success: true }
+    return { success: true };
   }
 
   public async getDashboardStats(payload: GetDashboardStatsInputType) {
-    const { userId } = await getDashboardStatsInput.parseAsync(payload)
+    const { userId } = await getDashboardStatsInput.parseAsync(payload);
 
-    const startOfMonth = new Date()
-    startOfMonth.setDate(1)
-    startOfMonth.setHours(0, 0, 0, 0)
+    const startOfMonth = new Date();
+    startOfMonth.setDate(1);
+    startOfMonth.setHours(0, 0, 0, 0);
 
     // Trend chart covers up to 90 days so the dashboard can render
     // 7d / 30d / 90d windows from a single fetch.
-    const ninetyDaysAgo = new Date()
-    ninetyDaysAgo.setDate(ninetyDaysAgo.getDate() - 89)
-    ninetyDaysAgo.setHours(0, 0, 0, 0)
+    const ninetyDaysAgo = new Date();
+    ninetyDaysAgo.setDate(ninetyDaysAgo.getDate() - 89);
+    ninetyDaysAgo.setHours(0, 0, 0, 0);
 
     // ─── One round-trip, one connection ──────────────────────────────────
     //
@@ -350,11 +367,11 @@ class FormService {
     // Output shape mirrors the four old result sets so the JS below
     // didn't need to change.
     type DashboardRow = {
-      forms: Array<{ id: string; title: string; is_published: boolean; created_at: string }> | null
-      agg: { total: number; month: number } | null
-      per_form: Array<{ form_id: string; cnt: number }> | null
-      trends: Array<{ created_at: string }> | null
-    }
+      forms: Array<{ id: string; title: string; is_published: boolean; created_at: string }> | null;
+      agg: { total: number; month: number } | null;
+      per_form: Array<{ form_id: string; cnt: number }> | null;
+      trends: Array<{ created_at: string }> | null;
+    };
     const rows = await db.execute<DashboardRow>(sql`
       with owned as (
         select id, title, is_published, created_at
@@ -387,29 +404,31 @@ class FormService {
             where s.created_at >= ${ninetyDaysAgo}
           ) t
         ) as trends
-    `)
+    `);
 
-    const row = (rows as any).rows?.[0] as DashboardRow | undefined
+    const row = (rows as any).rows?.[0] as DashboardRow | undefined;
     const forms = (row?.forms ?? []).map((f) => ({
       id: f.id,
       title: f.title,
       isPublished: f.is_published,
       createdAt: new Date(f.created_at),
-    }))
-    const aggRow = [{
-      total: row?.agg?.total ?? 0,
-      month: row?.agg?.month ?? 0,
-    }]
+    }));
+    const aggRow = [
+      {
+        total: row?.agg?.total ?? 0,
+        month: row?.agg?.month ?? 0,
+      },
+    ];
     const perFormCounts = (row?.per_form ?? []).map((r) => ({
       formId: r.form_id,
       value: r.cnt,
-    }))
+    }));
     const trendRows = (row?.trends ?? []).map((r) => ({
       createdAt: new Date(r.created_at),
-    }))
+    }));
 
-    const totalSketches = forms.length
-    const publishedSketches = forms.filter(f => f.isPublished).length
+    const totalSketches = forms.length;
+    const publishedSketches = forms.filter((f) => f.isPublished).length;
 
     if (totalSketches === 0) {
       return {
@@ -418,48 +437,51 @@ class FormService {
         totalResponses: 0,
         responsesThisMonth: 0,
         recentForms: [],
-        trends: []
-      }
+        trends: [],
+      };
     }
 
     // Sort in memory and grab the four most recent — avoids the second
     // SELECT on formsTable that the old implementation made.
     const recentFormsRaw = [...forms]
       .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
-      .slice(0, 4)
+      .slice(0, 4);
 
-    const totalResponses = Number(aggRow[0]?.total ?? 0)
-    const responsesThisMonth = Number(aggRow[0]?.month ?? 0)
+    const totalResponses = Number(aggRow[0]?.total ?? 0);
+    const responsesThisMonth = Number(aggRow[0]?.month ?? 0);
 
-    const countByForm = new Map(perFormCounts.map(r => [r.formId, Number(r.value)]))
-    const recentForms = recentFormsRaw.map(f => ({
+    const countByForm = new Map(perFormCounts.map((r) => [r.formId, Number(r.value)]));
+    const recentForms = recentFormsRaw.map((f) => ({
       id: f.id,
       title: f.title,
       createdAt: f.createdAt,
       isPublished: f.isPublished,
-      submissionsCount: countByForm.get(f.id) ?? 0
-    }))
+      submissionsCount: countByForm.get(f.id) ?? 0,
+    }));
 
-    const trendsMap: Record<string, number> = {}
-    const today = new Date()
+    const trendsMap: Record<string, number> = {};
+    const today = new Date();
     for (let i = 89; i >= 0; i--) {
-      const d = new Date(today)
-      d.setDate(today.getDate() - i)
-      const dateStr = d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
-      trendsMap[dateStr] = 0
+      const d = new Date(today);
+      d.setDate(today.getDate() - i);
+      const dateStr = d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+      trendsMap[dateStr] = 0;
     }
 
-    trendRows.forEach(s => {
-      const dateStr = new Date(s.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+    trendRows.forEach((s) => {
+      const dateStr = new Date(s.createdAt).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+      });
       if (trendsMap[dateStr] !== undefined) {
-        trendsMap[dateStr]++
+        trendsMap[dateStr]++;
       }
-    })
+    });
 
     const trends = Object.entries(trendsMap).map(([date, count]) => ({
       date,
-      count
-    }))
+      count,
+    }));
 
     return {
       totalSketches,
@@ -467,16 +489,16 @@ class FormService {
       totalResponses,
       responsesThisMonth,
       recentForms,
-      trends
-    }
+      trends,
+    };
   }
 
   // Collaborator management
   public async listCollaborators(payload: ListCollaboratorsInputType & { userId: string }) {
-    const { formId } = await listCollaboratorsInput.parseAsync(payload)
-    const { userId } = payload
+    const { formId } = await listCollaboratorsInput.parseAsync(payload);
+    const { userId } = payload;
 
-    await requireOwner(formId, userId)
+    await requireOwner(formId, userId);
 
     const result = await db
       .select({
@@ -488,55 +510,60 @@ class FormService {
       })
       .from(formCollaboratorsTable)
       .innerJoin(usersTable, eq(formCollaboratorsTable.userId, usersTable.id))
-      .where(eq(formCollaboratorsTable.formId, formId))
+      .where(eq(formCollaboratorsTable.formId, formId));
 
-    return result.map(c => ({
+    return result.map((c) => ({
       id: c.id,
       name: c.name,
       email: c.email,
       role: c.role as "viewer" | "editor",
-      addedBy: c.addedBy
-    }))
+      addedBy: c.addedBy,
+    }));
   }
 
   public async addCollaborator(payload: AddCollaboratorInputType & { requesterId: string }) {
-    const { formId, email, role } = await addCollaboratorInput.parseAsync(payload)
-    const { requesterId } = payload
+    const { formId, email, role } = await addCollaboratorInput.parseAsync(payload);
+    const { requesterId } = payload;
 
-    await requireOwner(formId, requesterId)
+    await requireOwner(formId, requesterId);
 
     const users = await db
       .select({ id: usersTable.id })
       .from(usersTable)
       .where(eq(usersTable.email, email))
-      .limit(1)
+      .limit(1);
 
-    const targetUser = users[0]
+    const targetUser = users[0];
     if (!targetUser) {
-      throw new Error("User with this email not found")
+      throw new Error("User with this email not found");
     }
 
     const form = await db
       .select({ ownerId: formsTable.ownerId })
       .from(formsTable)
       .where(eq(formsTable.id, formId))
-      .limit(1)
+      .limit(1);
 
     if (!form[0]) {
-      throw new Error("Form not found")
+      throw new Error("Form not found");
     }
     if (form[0].ownerId === targetUser.id) {
-      throw new Error("Cannot add the form owner as a collaborator")
+      throw new Error("Cannot add the form owner as a collaborator");
     }
 
     const existing = await db
       .select()
       .from(formCollaboratorsTable)
-      .where(and(eq(formCollaboratorsTable.formId, formId), eq(formCollaboratorsTable.userId, targetUser.id)))
-      .limit(1)
+      .where(
+        and(
+          eq(formCollaboratorsTable.formId, formId),
+          eq(formCollaboratorsTable.userId, targetUser.id),
+        ),
+      )
+      .limit(1);
 
     if (existing[0]) {
-      throw new Error("User is already a collaborator on this form")
+      throw new Error("User is already a collaborator on this form");
     }
 
     await db.insert(formCollaboratorsTable).values({
@@ -544,109 +571,130 @@ class FormService {
       userId: targetUser.id,
       role,
       addedBy: requesterId,
-    })
+    });
 
-    return { success: true }
+    return { success: true };
   }
 
-  public async updateCollaboratorRole(payload: UpdateCollaboratorRoleInputType & { requesterId: string }) {
-    const { formId, userId: targetUserId, role } = await updateCollaboratorRoleInput.parseAsync(payload)
-    const { requesterId } = payload
+  public async updateCollaboratorRole(
+    payload: UpdateCollaboratorRoleInputType & { requesterId: string },
+  ) {
+    const {
+      formId,
+      userId: targetUserId,
+      role,
+    } = await updateCollaboratorRoleInput.parseAsync(payload);
+    const { requesterId } = payload;
 
-    await requireOwner(formId, requesterId)
+    await requireOwner(formId, requesterId);
 
     const form = await db
       .select({ ownerId: formsTable.ownerId })
       .from(formsTable)
       .where(eq(formsTable.id, formId))
-      .limit(1)
+      .limit(1);
 
     if (!form[0]) {
-      throw new Error("Form not found")
+      throw new Error("Form not found");
     }
     if (form[0].ownerId === targetUserId) {
-      throw new Error("Cannot modify owner role")
+      throw new Error("Cannot modify owner role");
     }
     if (requesterId === targetUserId) {
-      throw new Error("Cannot modify your own collaborator role")
+      throw new Error("Cannot modify your own collaborator role");
     }
 
     const result = await db
       .update(formCollaboratorsTable)
       .set({ role, updatedAt: new Date() })
-      .where(and(eq(formCollaboratorsTable.formId, formId), eq(formCollaboratorsTable.userId, targetUserId)))
-      .returning({ id: formCollaboratorsTable.id })
+      .where(
+        and(
+          eq(formCollaboratorsTable.formId, formId),
+          eq(formCollaboratorsTable.userId, targetUserId),
+        ),
+      )
+      .returning({ id: formCollaboratorsTable.id });
 
     if (!result[0]) {
-      throw new Error("Collaborator not found")
+      throw new Error("Collaborator not found");
     }
 
-    return { success: true }
+    return { success: true };
   }
 
   public async removeCollaborator(payload: RemoveCollaboratorInputType & { requesterId: string }) {
-    const { formId, userId: targetUserId } = await removeCollaboratorInput.parseAsync(payload)
-    const { requesterId } = payload
+    const { formId, userId: targetUserId } = await removeCollaboratorInput.parseAsync(payload);
+    const { requesterId } = payload;
 
-    await requireOwner(formId, requesterId)
+    await requireOwner(formId, requesterId);
 
     const form = await db
       .select({ ownerId: formsTable.ownerId })
       .from(formsTable)
       .where(eq(formsTable.id, formId))
-      .limit(1)
+      .limit(1);
 
     if (!form[0]) {
-      throw new Error("Form not found")
+      throw new Error("Form not found");
     }
     if (form[0].ownerId === targetUserId) {
-      throw new Error("Cannot remove owner")
+      throw new Error("Cannot remove owner");
     }
     if (requesterId === targetUserId) {
-      throw new Error("Cannot remove yourself")
+      throw new Error("Cannot remove yourself");
     }
 
     const result = await db
       .delete(formCollaboratorsTable)
-      .where(and(eq(formCollaboratorsTable.formId, formId), eq(formCollaboratorsTable.userId, targetUserId)))
-      .returning({ id: formCollaboratorsTable.id })
+      .where(
+        and(
+          eq(formCollaboratorsTable.formId, formId),
+          eq(formCollaboratorsTable.userId, targetUserId),
+        ),
+      )
+      .returning({ id: formCollaboratorsTable.id });
 
     if (!result[0]) {
-      throw new Error("Collaborator not found")
+      throw new Error("Collaborator not found");
     }
 
-    return { success: true }
+    return { success: true };
   }
 
   public async transferOwnership(payload: TransferOwnershipInputType & { requesterId: string }) {
-    const { formId, targetUserId } = await transferOwnershipInput.parseAsync(payload)
-    const { requesterId } = payload
+    const { formId, targetUserId } = await transferOwnershipInput.parseAsync(payload);
+    const { requesterId } = payload;
 
-    await requireOwner(formId, requesterId)
+    await requireOwner(formId, requesterId);
 
     if (requesterId === targetUserId) {
-      throw new Error("You are already the owner of this form")
+      throw new Error("You are already the owner of this form");
     }
 
     const targetUser = await db
       .select({ id: usersTable.id })
       .from(usersTable)
       .where(eq(usersTable.id, targetUserId))
-      .limit(1)
+      .limit(1);
 
     if (!targetUser[0]) {
-      throw new Error("Target user not found")
+      throw new Error("Target user not found");
     }
 
     await db.transaction(async (tx) => {
       await tx
         .update(formsTable)
         .set({ ownerId: targetUserId, updatedAt: new Date() })
-        .where(eq(formsTable.id, formId))
+        .where(eq(formsTable.id, formId));
 
       await tx
         .delete(formCollaboratorsTable)
-        .where(and(eq(formCollaboratorsTable.formId, formId), eq(formCollaboratorsTable.userId, targetUserId)))
+        .where(
+          and(
+            eq(formCollaboratorsTable.formId, formId),
+            eq(formCollaboratorsTable.userId, targetUserId),
+          ),
+        );
 
       await tx
         .insert(formCollaboratorsTable)
@@ -658,12 +706,34 @@ class FormService {
         })
         .onConflictDoUpdate({
           target: [formCollaboratorsTable.formId, formCollaboratorsTable.userId],
-          set: { role: "editor", updatedAt: new Date() }
-        })
-    })
+          set: { role: "editor", updatedAt: new Date() },
+        });
+    });
+
+    return { success: true };
+  }
+
+  public async updateFormSettings(payload: UpdateFormSettingsInputType & { requesterId: string }) {
+    const { id, title, description, isOpen, maxSubmissions, expiresAt } =
+      await updateFormSettingsInput.parseAsync(payload);
+    const { requesterId } = payload;
+
+    await requireOwner(id, requesterId);
+
+    await db
+      .update(formsTable)
+      .set({
+        title,
+        description: description ?? null,
+        isOpen,
+        maxSubmissions: maxSubmissions ?? null,
+        expiresAt: expiresAt ? new Date(expiresAt) : null,
+        updatedAt: new Date(),
+      })
+      .where(eq(formsTable.id, id));
 
-    return { success: true }
+    return { success: true };
   }
 }
 
-export default FormService
+export default FormService;
diff --git a/packages/services/form/model.ts b/packages/services/form/model.ts
index dcb56b4..fbf0002 100644
--- a/packages/services/form/model.ts
+++ b/packages/services/form/model.ts
@@ -1,25 +1,25 @@
-import { z } from 'zod'
-import { getFormFieldOutput } from '../form-field/model'
+import { z } from "zod";
+import { getFormFieldOutput } from "../form-field/model";
 
 export type FormRole = "owner" | "editor" | "viewer";
 
 export interface FormPermissions {
   builder: {
-    canView: boolean
-    canEdit: boolean
-  }
+    canView: boolean;
+    canEdit: boolean;
+  };
   analytics: {
-    canView: boolean
-  }
+    canView: boolean;
+  };
   responses: {
-    canView: boolean
-  }
+    canView: boolean;
+  };
   settings: {
-    canDelete: boolean
-    canPublish: boolean
-    canArchive: boolean
-    canShare: boolean
-  }
+    canDelete: boolean;
+    canPublish: boolean;
+    canArchive: boolean;
+    canShare: boolean;
+  };
 }
 
 // Sanitisation: every string input gets `.trim()` so leading/trailing
@@ -38,45 +38,45 @@ export const createFormInput = z.object({
     .max(150)
     .regex(
       /^[a-z0-9]+(?:-[a-z0-9]+)*$/,
-      "Slug may only contain lowercase letters, digits, and hyphens"
+      "Slug may only contain lowercase letters, digits, and hyphens",
     )
     .describe("Unique slug for the form URL"),
-  ownerId: z.string().describe("Owner user ID")
-})
+  ownerId: z.string().describe("Owner user ID"),
+});
 
-export type CreateFormInputType = z.infer<typeof createFormInput>
+export type CreateFormInputType = z.infer<typeof createFormInput>;
 
 export const listFormsByUserIdInput = z.object({
-  userId: z.string().describe("Owner user ID")
-})
+  userId: z.string().describe("Owner user ID"),
+});
 
-export type ListFormsByUserIdInputType = z.infer<typeof listFormsByUserIdInput>
+export type ListFormsByUserIdInputType = z.infer<typeof listFormsByUserIdInput>;
 
 export const getFormInput = z.object({
-  id: z.string().uuid().describe("Form ID")
-})
-export type GetFormInputType = z.infer<typeof getFormInput>
+  id: z.string().uuid().describe("Form ID"),
+});
+export type GetFormInputType = z.infer<typeof getFormInput>;
 
 export const formPermissionsSchema = z.object({
   builder: z.object({
     canView: z.boolean(),
-    canEdit: z.boolean()
+    canEdit: z.boolean(),
   }),
   analytics: z.object({
-    canView: z.boolean()
+    canView: z.boolean(),
   }),
   responses: z.object({
-    canView: z.boolean()
+    canView: z.boolean(),
   }),
   settings: z.object({
     canDelete: z.boolean(),
     canPublish: z.boolean(),
     canArchive: z.boolean(),
-    canShare: z.boolean()
-  })
-})
+    canShare: z.boolean(),
+  }),
+});
 
-export type FormPermissionsType = z.infer<typeof formPermissionsSchema>
+export type FormPermissionsType = z.infer<typeof formPermissionsSchema>;
 
 export const getFormOutput = z.object({
   id: z.string().uuid(),
@@ -86,116 +86,152 @@ export const getFormOutput = z.object({
   isPublished: z.boolean(),
   isArchived: z.boolean(),
   isOpen: z.boolean(),
+  maxSubmissions: z.number().nullable().optional(),
+  expiresAt: z.any().nullable().optional(),
+  submissionsCount: z.number().nullable().optional(),
   createdAt: z.any(),
   updatedAt: z.any(),
   publishedAt: z.any().nullable().optional(),
   ownerEmail: z.string().nullable().optional(),
   role: z.enum(["owner", "editor", "viewer"]).optional(),
   permissions: formPermissionsSchema.optional(),
-})
-export type GetFormOutputType = z.infer<typeof getFormOutput>
+});
+export type GetFormOutputType = z.infer<typeof getFormOutput>;
 
 export const getFormByIdOutput = getFormOutput.extend({
-  fields: z.array(getFormFieldOutput)
-})
-export type GetFormByIdOutputType = z.infer<typeof getFormByIdOutput>
+  fields: z.array(getFormFieldOutput),
+});
+export type GetFormByIdOutputType = z.infer<typeof getFormByIdOutput>;
 
 export const publishFormOutput = z.object({
-  id: z.string().uuid().describe("ID of the published form")
-})
-export type PublishFormOutputType = z.infer<typeof publishFormOutput>
+  id: z.string().uuid().describe("ID of the published form"),
+});
+export type PublishFormOutputType = z.infer<typeof publishFormOutput>;
 
 export const deleteFormInput = z.object({
   id: z.string().uuid().describe("Form ID to delete"),
-})
-export type DeleteFormInputType = z.infer<typeof deleteFormInput>
+});
+export type DeleteFormInputType = z.infer<typeof deleteFormInput>;
 
 export const deleteFormOutput = z.object({
-  success: z.boolean().describe("Whether deletion was successful")
-})
-export type DeleteFormOutputType = z.infer<typeof deleteFormOutput>
+  success: z.boolean().describe("Whether deletion was successful"),
+});
+export type DeleteFormOutputType = z.infer<typeof deleteFormOutput>;
 
 export const getDashboardStatsInput = z.object({
-  userId: z.string().describe("Owner user ID")
-})
-export type GetDashboardStatsInputType = z.infer<typeof getDashboardStatsInput>
+  userId: z.string().describe("Owner user ID"),
+});
+export type GetDashboardStatsInputType = z.infer<typeof getDashboardStatsInput>;
 
 export const getDashboardStatsOutput = z.object({
   totalSketches: z.number(),
   publishedSketches: z.number(),
   totalResponses: z.number(),
   responsesThisMonth: z.number(),
-  recentForms: z.array(z.object({
-    id: z.string().uuid(),
-    title: z.string(),
-    createdAt: z.any(),
-    isPublished: z.boolean(),
-    submissionsCount: z.number()
-  })),
-  trends: z.array(z.object({
-    date: z.string(),
-    count: z.number()
-  }))
-})
-export type GetDashboardStatsOutputType = z.infer<typeof getDashboardStatsOutput>
+  recentForms: z.array(
+    z.object({
+      id: z.string().uuid(),
+      title: z.string(),
+      createdAt: z.any(),
+      isPublished: z.boolean(),
+      submissionsCount: z.number(),
+    }),
+  ),
+  trends: z.array(
+    z.object({
+      date: z.string(),
+      count: z.number(),
+    }),
+  ),
+});
+export type GetDashboardStatsOutputType = z.infer<typeof getDashboardStatsOutput>;
 
 // Collaborator Schemas
 export const listCollaboratorsInput = z.object({
-  formId: z.string().uuid().describe("Form ID")
-})
-export type ListCollaboratorsInputType = z.infer<typeof listCollaboratorsInput>
-
-export const listCollaboratorsOutput = z.array(z.object({
-  id: z.string().describe("Collaborator user ID"),
-  name: z.string(),
-  email: z.string().email(),
-  role: z.enum(["viewer", "editor"]),
-  addedBy: z.string().nullable().optional()
-}))
-export type ListCollaboratorsOutputType = z.infer<typeof listCollaboratorsOutput>
+  formId: z.string().uuid().describe("Form ID"),
+});
+export type ListCollaboratorsInputType = z.infer<typeof listCollaboratorsInput>;
+
+export const listCollaboratorsOutput = z.array(
+  z.object({
+    id: z.string().describe("Collaborator user ID"),
+    name: z.string(),
+    email: z.string().email(),
+    role: z.enum(["viewer", "editor"]),
+    addedBy: z.string().nullable().optional(),
+  }),
+);
+export type ListCollaboratorsOutputType = z.infer<typeof listCollaboratorsOutput>;
 
 export const addCollaboratorInput = z.object({
   formId: z.string().uuid().describe("Form ID"),
   email: z.string().email().describe("Collaborator email"),
-  role: z.enum(["viewer", "editor"]).describe("Collaborator role")
-})
-export type AddCollaboratorInputType = z.infer<typeof addCollaboratorInput>
+  role: z.enum(["viewer", "editor"]).describe("Collaborator role"),
+});
+export type AddCollaboratorInputType = z.infer<typeof addCollaboratorInput>;
 
 export const addCollaboratorOutput = z.object({
-  success: z.boolean()
-})
-export type AddCollaboratorOutputType = z.infer<typeof addCollaboratorOutput>
+  success: z.boolean(),
+});
+export type AddCollaboratorOutputType = z.infer<typeof addCollaboratorOutput>;
 
 export const updateCollaboratorRoleInput = z.object({
   formId: z.string().uuid().describe("Form ID"),
   userId: z.string().describe("Collaborator user ID"),
-  role: z.enum(["viewer", "editor"]).describe("New collaborator role")
-})
-export type UpdateCollaboratorRoleInputType = z.infer<typeof updateCollaboratorRoleInput>
+  role: z.enum(["viewer", "editor"]).describe("New collaborator role"),
+});
+export type UpdateCollaboratorRoleInputType = z.infer<typeof updateCollaboratorRoleInput>;
 
 export const updateCollaboratorRoleOutput = z.object({
-  success: z.boolean()
-})
-export type UpdateCollaboratorRoleOutputType = z.infer<typeof updateCollaboratorRoleOutput>
+  success: z.boolean(),
+});
+export type UpdateCollaboratorRoleOutputType = z.infer<typeof updateCollaboratorRoleOutput>;
 
 export const removeCollaboratorInput = z.object({
   formId: z.string().uuid().describe("Form ID"),
-  userId: z.string().describe("Collaborator user ID")
-})
-export type RemoveCollaboratorInputType = z.infer<typeof removeCollaboratorInput>
+  userId: z.string().describe("Collaborator user ID"),
+});
+export type RemoveCollaboratorInputType = z.infer<typeof removeCollaboratorInput>;
 
 export const removeCollaboratorOutput = z.object({
-  success: z.boolean()
-})
-export type RemoveCollaboratorOutputType = z.infer<typeof removeCollaboratorOutput>
+  success: z.boolean(),
+});
+export type RemoveCollaboratorOutputType = z.infer<typeof removeCollaboratorOutput>;
 
 export const transferOwnershipInput = z.object({
   formId: z.string().uuid().describe("Form ID"),
-  targetUserId: z.string().describe("Target user ID")
-})
-export type TransferOwnershipInputType = z.infer<typeof transferOwnershipInput>
+  targetUserId: z.string().describe("Target user ID"),
+});
+export type TransferOwnershipInputType = z.infer<typeof transferOwnershipInput>;
 
 export const transferOwnershipOutput = z.object({
-  success: z.boolean()
-})
-export type TransferOwnershipOutputType = z.infer<typeof transferOwnershipOutput>
\ No newline at end of file
+  success: z.boolean(),
+});
+export type TransferOwnershipOutputType = z.infer<typeof transferOwnershipOutput>;
+
+export const updateFormSettingsInput = z.object({
+  id: z.string().uuid().describe("Form ID"),
+  title: z.string().trim().min(1).max(150).describe("Title of the form"),
+  description: z
+    .string()
+    .trim()
+    .max(2000)
+    .nullable()
+    .optional()
+    .describe("Description of the form"),
+  isOpen: z.boolean().describe("Whether the form accepts submissions"),
+  maxSubmissions: z
+    .number()
+    .int()
+    .min(0)
+    .nullable()
+    .optional()
+    .describe("Maximum number of submissions"),
+  expiresAt: z.any().nullable().optional().describe("Expiration date ISO string or Date object"),
+});
+export type UpdateFormSettingsInputType = z.infer<typeof updateFormSettingsInput>;
+
+export const updateFormSettingsOutput = z.object({
+  success: z.boolean().describe("Whether settings update was successful"),
+});
+export type UpdateFormSettingsOutputType = z.infer<typeof updateFormSettingsOutput>;
diff --git a/packages/trpc/client/index.ts b/packages/trpc/client/index.ts
index 701099b..8ce9af6 100644
--- a/packages/trpc/client/index.ts
+++ b/packages/trpc/client/index.ts
@@ -8,4 +8,3 @@ export type RouterInputs = inferRouterInputs<ServerRouter>;
 export type { ServerRouter } from "../server";
 
 export * from "@trpc/client";
-
diff --git a/packages/trpc/server/auth.ts b/packages/trpc/server/auth.ts
index 2134f99..db159e9 100644
--- a/packages/trpc/server/auth.ts
+++ b/packages/trpc/server/auth.ts
@@ -1,31 +1,36 @@
 import { betterAuth } from "better-auth";
 import { drizzleAdapter } from "@better-auth/drizzle-adapter";
 import db from "@repo/database";
-import { usersTable, sessionsTable, accountsTable, verificationsTable } from "@repo/database/models/auth";
+import {
+  usersTable,
+  sessionsTable,
+  accountsTable,
+  verificationsTable,
+} from "@repo/database/models/auth";
 
 // Only register a social provider when BOTH its client id and secret are
 // present as real values. Falling back to placeholder strings causes a 500
 // when better-auth tries to initiate the OAuth flow.
-const googleClientId     = process.env.GOOGLE_CLIENT_ID;
+const googleClientId = process.env.GOOGLE_CLIENT_ID;
 const googleClientSecret = process.env.GOOGLE_CLIENT_SECRET;
-const githubClientId     = process.env.GITHUB_CLIENT_ID;
+const githubClientId = process.env.GITHUB_CLIENT_ID;
 const githubClientSecret = process.env.GITHUB_CLIENT_SECRET;
 
 const socialProviders: Parameters<typeof betterAuth>[0]["socialProviders"] = {};
 if (googleClientId && googleClientSecret) {
-    socialProviders.google = { clientId: googleClientId, clientSecret: googleClientSecret };
+  socialProviders.google = { clientId: googleClientId, clientSecret: googleClientSecret };
 }
 if (githubClientId && githubClientSecret) {
-    socialProviders.github = { clientId: githubClientId, clientSecret: githubClientSecret };
+  socialProviders.github = { clientId: githubClientId, clientSecret: githubClientSecret };
 }
 
 // Additional trusted origins from env (comma-separated). Lets us add
 // production / staging hosts without code edits.
 //   TRUSTED_ORIGINS=https://canvasflow.dittya.dev
 const extraTrustedOrigins = (process.env.TRUSTED_ORIGINS ?? "")
-    .split(",")
-    .map((s) => s.trim())
-    .filter(Boolean);
+  .split(",")
+  .map((s) => s.trim())
+  .filter(Boolean);
 
 // Cookie domain for the subdomain split (web on `canvasflow.…`, api on
 // `api.canvasflow.…`). Setting this to `.canvasflow.dittya.dev` lets the
@@ -35,42 +40,42 @@ const extraTrustedOrigins = (process.env.TRUSTED_ORIGINS ?? "")
 const cookieDomain = process.env.COOKIE_DOMAIN || undefined;
 
 export const auth = betterAuth({
-    baseURL: process.env.BETTER_AUTH_URL || "http://localhost:8000",
-    database: drizzleAdapter(db, {
-        provider: "pg",
-        schema: {
-            user: usersTable,
-            session: sessionsTable,
-            account: accountsTable,
-            verification: verificationsTable,
-        },
-    }),
-    emailAndPassword: {
-        enabled: true,
+  baseURL: process.env.BETTER_AUTH_URL || "http://localhost:8000",
+  database: drizzleAdapter(db, {
+    provider: "pg",
+    schema: {
+      user: usersTable,
+      session: sessionsTable,
+      account: accountsTable,
+      verification: verificationsTable,
     },
-    session: {
-        cookieCache: {
-            enabled: true,
-            maxAge: 5 * 60,
-        },
+  }),
+  emailAndPassword: {
+    enabled: true,
+  },
+  session: {
+    cookieCache: {
+      enabled: true,
+      maxAge: 5 * 60,
     },
-    socialProviders,
-    trustedOrigins: [
-        "http://localhost:3000",
-        "https://canvas-flow-web.vercel.app",
-        "https://canvas-flow-web-git-main-dittya-maitys-projects.vercel.app",
-        ...extraTrustedOrigins,
-    ],
-    advanced: {
-        cookiePrefix: "better-auth",
-        useSecureCookies: true,
-        defaultCookieAttributes: {
-            sameSite: "none",
-            secure: true,
-            ...(cookieDomain ? { domain: cookieDomain } : {}),
-        }
+  },
+  socialProviders,
+  trustedOrigins: [
+    "http://localhost:3000",
+    "https://canvas-flow-web.vercel.app",
+    "https://canvas-flow-web-git-main-dittya-maitys-projects.vercel.app",
+    ...extraTrustedOrigins,
+  ],
+  advanced: {
+    cookiePrefix: "better-auth",
+    useSecureCookies: true,
+    defaultCookieAttributes: {
+      sameSite: "none",
+      secure: true,
+      ...(cookieDomain ? { domain: cookieDomain } : {}),
     },
+  },
 });
 
-export type Auth = ReturnType<typeof betterAuth>
-export type Session = Auth["$Infer"]["Session"]
+export type Auth = ReturnType<typeof betterAuth>;
+export type Session = Auth["$Infer"]["Session"];
diff --git a/packages/trpc/server/context.ts b/packages/trpc/server/context.ts
index ff60503..b2468cb 100644
--- a/packages/trpc/server/context.ts
+++ b/packages/trpc/server/context.ts
@@ -1,35 +1,37 @@
 import type { CreateExpressContextOptions } from "@trpc/server/adapters/express";
 import type { Request } from "express";
 
-
 export interface TRPCCtxUser {
-    id: string
-    email: string
-    name: string
+  id: string;
+  email: string;
+  name: string;
 }
 
 export interface TRPCContext {
-    req: Request
-    setHeaders: (headers: Headers) => void
+  req: Request;
+  setHeaders: (headers: Headers) => void;
 
-    user?: TRPCCtxUser
+  user?: TRPCCtxUser;
 }
 
-export async function createContext({req, res}: CreateExpressContextOptions): Promise<TRPCContext> {
-    const ctx: TRPCContext = {
-        req,
-        setHeaders: (headers: Headers) => {
-            headers.forEach((value, key) => {
-                if (key.toLowerCase() === "set-cookie") {
-                    res.append("Set-Cookie", value);
-                } else {
-                    res.setHeader(key, value);
-                }
-            });
-        },
-        user: undefined
-    }
+export async function createContext({
+  req,
+  res,
+}: CreateExpressContextOptions): Promise<TRPCContext> {
+  const ctx: TRPCContext = {
+    req,
+    setHeaders: (headers: Headers) => {
+      headers.forEach((value, key) => {
+        if (key.toLowerCase() === "set-cookie") {
+          res.append("Set-Cookie", value);
+        } else {
+          res.setHeader(key, value);
+        }
+      });
+    },
+    user: undefined,
+  };
 
-    return ctx
+  return ctx;
 }
 export type Context = Awaited<ReturnType<typeof createContext>>;
diff --git a/packages/trpc/server/index.ts b/packages/trpc/server/index.ts
index cfb6b1e..36bb4b5 100644
--- a/packages/trpc/server/index.ts
+++ b/packages/trpc/server/index.ts
@@ -15,4 +15,3 @@ export const serverRouter = router({
 export { createContext } from "./context";
 export { auth } from "./auth";
 export type ServerRouter = typeof serverRouter;
-
diff --git a/packages/trpc/server/routes/analytics/model.ts b/packages/trpc/server/routes/analytics/model.ts
index d0a883f..65a544d 100644
--- a/packages/trpc/server/routes/analytics/model.ts
+++ b/packages/trpc/server/routes/analytics/model.ts
@@ -9,4 +9,4 @@ export {
   recordViewOutput as recordViewOutputModel,
   recordFieldAnswerInput as recordFieldAnswerInputModel,
   recordFieldAnswerOutput as recordFieldAnswerOutputModel,
-} from "@repo/services/analytics/model"
+} from "@repo/services/analytics/model";
diff --git a/packages/trpc/server/routes/analytics/route.ts b/packages/trpc/server/routes/analytics/route.ts
index 3172ce0..a286e35 100644
--- a/packages/trpc/server/routes/analytics/route.ts
+++ b/packages/trpc/server/routes/analytics/route.ts
@@ -1,5 +1,10 @@
-import { authenticatedProcedure, proAuthenticatedProcedure, publicProcedure, router } from "../../trpc"
-import { generatePath } from "../../utils/path-generator"
+import {
+  authenticatedProcedure,
+  proAuthenticatedProcedure,
+  publicProcedure,
+  router,
+} from "../../trpc";
+import { generatePath } from "../../utils/path-generator";
 import {
   getFormAnalyticsInputModel,
   getFormAnalyticsOutputModel,
@@ -11,14 +16,13 @@ import {
   recordViewOutputModel,
   recordFieldAnswerInputModel,
   recordFieldAnswerOutputModel,
-} from "./model"
-import { analyticsService } from "../../services"
+} from "./model";
+import { analyticsService } from "../../services";
 
-const TAGS = ["Analytics"]
-const getPath = generatePath("/analytics")
+const TAGS = ["Analytics"];
+const getPath = generatePath("/analytics");
 
 export const analyticsRouter = router({
-
   /**
    * GET /analytics/getFormAnalytics/{formId}
    * Returns all free-tier analytics metrics for a form in a single call:
@@ -28,21 +32,22 @@ export const analyticsRouter = router({
    *   - hourlyDistribution (0–23 buckets)
    *   - peakHour, peakDay, avgSubmissionsPerDay, avgSubmissionsPerWeek
    */
-  getFormAnalytics: authenticatedProcedure.meta({
-    openapi: {
-      method: "GET",
-      path: getPath("/getFormAnalytics/{formId}"),
-      tags: TAGS,
-      protect: true,
-    },
-  })
+  getFormAnalytics: authenticatedProcedure
+    .meta({
+      openapi: {
+        method: "GET",
+        path: getPath("/getFormAnalytics/{formId}"),
+        tags: TAGS,
+        protect: true,
+      },
+    })
     .input(getFormAnalyticsInputModel)
     .output(getFormAnalyticsOutputModel)
     .query(async ({ input, ctx }) => {
       return analyticsService.getFormAnalytics({
         formId: input.formId,
         ownerId: ctx.user.id,
-      })
+      });
     }),
 
   /**
@@ -50,14 +55,15 @@ export const analyticsRouter = router({
    * Returns the full submission rows (including values jsonb) for the table view.
    * Kept separate from getFormAnalytics so the heavy jsonb is only loaded on demand.
    */
-  getSubmissions: authenticatedProcedure.meta({
-    openapi: {
-      method: "GET",
-      path: getPath("/getSubmissions/{formId}"),
-      tags: TAGS,
-      protect: true,
-    },
-  })
+  getSubmissions: authenticatedProcedure
+    .meta({
+      openapi: {
+        method: "GET",
+        path: getPath("/getSubmissions/{formId}"),
+        tags: TAGS,
+        protect: true,
+      },
+    })
     .input(getSubmissionsListInputModel)
     .output(getSubmissionsListOutputModel)
     .query(async ({ input, ctx }) => {
@@ -66,7 +72,7 @@ export const analyticsRouter = router({
         ownerId: ctx.user.id,
         cursor: input.cursor ?? null,
         limit: input.limit,
-      })
+      });
     }),
 
   /**
@@ -74,18 +80,19 @@ export const analyticsRouter = router({
    * Records a view for a public form. Called by the public form page.
    * Public — no auth required.
    */
-  recordView: publicProcedure.meta({
-    openapi: {
-      method: "POST",
-      path: getPath("/recordView"),
-      tags: TAGS,
-      protect: false,
-    },
-  })
+  recordView: publicProcedure
+    .meta({
+      openapi: {
+        method: "POST",
+        path: getPath("/recordView"),
+        tags: TAGS,
+        protect: false,
+      },
+    })
     .input(recordViewInputModel)
     .output(recordViewOutputModel)
     .mutation(async ({ input }) => {
-      return analyticsService.recordView(input)
+      return analyticsService.recordView(input);
     }),
 
   /**
@@ -93,18 +100,19 @@ export const analyticsRouter = router({
    * Records that a visitor answered a field and clicked Next.
    * Called by the public form page on each Next click — no auth required.
    */
-  recordFieldAnswer: publicProcedure.meta({
-    openapi: {
-      method: "POST",
-      path: getPath("/recordFieldAnswer"),
-      tags: TAGS,
-      protect: false,
-    },
-  })
+  recordFieldAnswer: publicProcedure
+    .meta({
+      openapi: {
+        method: "POST",
+        path: getPath("/recordFieldAnswer"),
+        tags: TAGS,
+        protect: false,
+      },
+    })
     .input(recordFieldAnswerInputModel)
     .output(recordFieldAnswerOutputModel)
     .mutation(async ({ input }) => {
-      return analyticsService.recordFieldAnswer(input)
+      return analyticsService.recordFieldAnswer(input);
     }),
 
   /**
@@ -115,20 +123,21 @@ export const analyticsRouter = router({
    *
    * Returns FORBIDDEN for Free-tier users.
    */
-  getProAnalytics: proAuthenticatedProcedure.meta({
-    openapi: {
-      method: "GET",
-      path: getPath("/getProAnalytics/{formId}"),
-      tags: TAGS,
-      protect: true,
-    },
-  })
+  getProAnalytics: proAuthenticatedProcedure
+    .meta({
+      openapi: {
+        method: "GET",
+        path: getPath("/getProAnalytics/{formId}"),
+        tags: TAGS,
+        protect: true,
+      },
+    })
     .input(getProAnalyticsInputModel)
     .output(getProAnalyticsOutputModel)
     .query(async ({ input, ctx }) => {
       return analyticsService.getProAnalytics({
         formId: input.formId,
         ownerId: ctx.user.id,
-      })
+      });
     }),
-})
+});
diff --git a/packages/trpc/server/routes/form/model.ts b/packages/trpc/server/routes/form/model.ts
index c5cbb93..2a61410 100644
--- a/packages/trpc/server/routes/form/model.ts
+++ b/packages/trpc/server/routes/form/model.ts
@@ -1,95 +1,105 @@
-import { z } from 'zod'
+import { z } from "zod";
 
 export const createFormInputModel = z.object({
-    title: z.string().min(1, "Title must be at least 1 character").max(150, "Title must be at most 150 characters").describe("Title of the form"),
-    description: z.string().optional().describe("Description of the form"),
-    slug: z.string().min(1, "Slug must be at least 1 character").max(150, "Slug must be at most 150 characters").describe("Unique slug for the form")
-})
+  title: z
+    .string()
+    .min(1, "Title must be at least 1 character")
+    .max(150, "Title must be at most 150 characters")
+    .describe("Title of the form"),
+  description: z.string().optional().describe("Description of the form"),
+  slug: z
+    .string()
+    .min(1, "Slug must be at least 1 character")
+    .max(150, "Slug must be at most 150 characters")
+    .describe("Unique slug for the form"),
+});
 
 export const createFormOutputModel = z.object({
-    id: z.string().uuid().describe("ID of the created form")
-})
+  id: z.string().uuid().describe("ID of the created form"),
+});
 
-export type CreateFormInputModelType = z.infer<typeof createFormInputModel>
-export type CreateFormOutputModelType = z.infer<typeof createFormOutputModel>
+export type CreateFormInputModelType = z.infer<typeof createFormInputModel>;
+export type CreateFormOutputModelType = z.infer<typeof createFormOutputModel>;
 
-export const listFormsByUserIdInputModel = z.undefined()
+export const listFormsByUserIdInputModel = z.undefined();
 
 export const formPermissionsSchemaModel = z.object({
   builder: z.object({
     canView: z.boolean(),
-    canEdit: z.boolean()
+    canEdit: z.boolean(),
   }),
   analytics: z.object({
-    canView: z.boolean()
+    canView: z.boolean(),
   }),
   responses: z.object({
-    canView: z.boolean()
+    canView: z.boolean(),
   }),
   settings: z.object({
     canDelete: z.boolean(),
     canPublish: z.boolean(),
     canArchive: z.boolean(),
-    canShare: z.boolean()
-  })
-})
+    canShare: z.boolean(),
+  }),
+});
 
 export const listFormsByUserIdOutputModel = z.array(
-    z.object({
-        id: z.string().uuid().describe("ID of the form"),
-        title: z.string().describe("Title of the form"),
-        description: z.string().nullable().optional().describe("Description of the form"),
-        slug: z.string().describe("Unique slug for the form"),
-        isPublished: z.boolean().describe("Whether form is published"),
-        isArchived: z.boolean().describe("Whether form is archived"),
-        isOpen: z.boolean().describe("Whether form is open for submissions"),
-        createdAt: z.any().describe("Creation timestamp"),
-        updatedAt: z.any().describe("Last updated timestamp"),
-        publishedAt: z.any().nullable().optional().describe("Published timestamp"),
-        submissionsCount: z.number().describe("Total number of submissions"),
-        ownerEmail: z.string().nullable().optional().describe("Owner email"),
-        role: z.enum(["owner", "editor", "viewer"]).describe("Collaborator role"),
-        permissions: formPermissionsSchemaModel.describe("Permissions matrix"),
-    })
-)
+  z.object({
+    id: z.string().uuid().describe("ID of the form"),
+    title: z.string().describe("Title of the form"),
+    description: z.string().nullable().optional().describe("Description of the form"),
+    slug: z.string().describe("Unique slug for the form"),
+    isPublished: z.boolean().describe("Whether form is published"),
+    isArchived: z.boolean().describe("Whether form is archived"),
+    isOpen: z.boolean().describe("Whether form is open for submissions"),
+    createdAt: z.any().describe("Creation timestamp"),
+    updatedAt: z.any().describe("Last updated timestamp"),
+    publishedAt: z.any().nullable().optional().describe("Published timestamp"),
+    submissionsCount: z.number().describe("Total number of submissions"),
+    ownerEmail: z.string().nullable().optional().describe("Owner email"),
+    role: z.enum(["owner", "editor", "viewer"]).describe("Collaborator role"),
+    permissions: formPermissionsSchemaModel.describe("Permissions matrix"),
+  }),
+);
 
-export type ListFormsByUserIdInputModelType = z.infer<typeof listFormsByUserIdInputModel>
-export type ListFormsByUserIdOutputModelType = z.infer<typeof listFormsByUserIdOutputModel>
+export type ListFormsByUserIdInputModelType = z.infer<typeof listFormsByUserIdInputModel>;
+export type ListFormsByUserIdOutputModelType = z.infer<typeof listFormsByUserIdOutputModel>;
 
 export {
-    createFormFieldInput as createFormFieldInputModel,
-    createFormFieldOutput as createFormFieldOutputModel,
-    updateFormFieldInput as updateFormFieldInputModel,
-    updateFormFieldOutput as updateFormFieldOutputModel,
-    deleteFormFieldInput as deleteFormFieldInputModel,
-    deleteFormFieldOutput as deleteFormFieldOutputModel,
-    getFormFieldInput as getFormFieldInputModel,
-    getFormFieldOutput as getFormFieldOutputModel,
-    listFormFieldsInput as listFormFieldsInputModel,
-    listFormFieldsOutput as listFormFieldsOutputModel
-} from "@repo/services/form-field/model"
+  createFormFieldInput as createFormFieldInputModel,
+  createFormFieldOutput as createFormFieldOutputModel,
+  updateFormFieldInput as updateFormFieldInputModel,
+  updateFormFieldOutput as updateFormFieldOutputModel,
+  deleteFormFieldInput as deleteFormFieldInputModel,
+  deleteFormFieldOutput as deleteFormFieldOutputModel,
+  getFormFieldInput as getFormFieldInputModel,
+  getFormFieldOutput as getFormFieldOutputModel,
+  listFormFieldsInput as listFormFieldsInputModel,
+  listFormFieldsOutput as listFormFieldsOutputModel,
+} from "@repo/services/form-field/model";
 
 export {
-    getFormInput as getFormInputModel,
-    getFormOutput as getFormOutputModel,
-    getFormByIdOutput as getFormByIdOutputModel,
-    publishFormOutput as publishFormOutputModel,
-    deleteFormInput as deleteFormInputModel,
-    deleteFormOutput as deleteFormOutputModel,
-    getDashboardStatsOutput as getDashboardStatsOutputModel,
-    listCollaboratorsInput as listCollaboratorsInputModel,
-    listCollaboratorsOutput as listCollaboratorsOutputModel,
-    addCollaboratorInput as addCollaboratorInputModel,
-    addCollaboratorOutput as addCollaboratorOutputModel,
-    updateCollaboratorRoleInput as updateCollaboratorRoleInputModel,
-    updateCollaboratorRoleOutput as updateCollaboratorRoleOutputModel,
-    removeCollaboratorInput as removeCollaboratorInputModel,
-    removeCollaboratorOutput as removeCollaboratorOutputModel,
-    transferOwnershipInput as transferOwnershipInputModel,
-    transferOwnershipOutput as transferOwnershipOutputModel
-} from "@repo/services/form/model"
+  getFormInput as getFormInputModel,
+  getFormOutput as getFormOutputModel,
+  getFormByIdOutput as getFormByIdOutputModel,
+  publishFormOutput as publishFormOutputModel,
+  deleteFormInput as deleteFormInputModel,
+  deleteFormOutput as deleteFormOutputModel,
+  getDashboardStatsOutput as getDashboardStatsOutputModel,
+  listCollaboratorsInput as listCollaboratorsInputModel,
+  listCollaboratorsOutput as listCollaboratorsOutputModel,
+  addCollaboratorInput as addCollaboratorInputModel,
+  addCollaboratorOutput as addCollaboratorOutputModel,
+  updateCollaboratorRoleInput as updateCollaboratorRoleInputModel,
+  updateCollaboratorRoleOutput as updateCollaboratorRoleOutputModel,
+  removeCollaboratorInput as removeCollaboratorInputModel,
+  removeCollaboratorOutput as removeCollaboratorOutputModel,
+  transferOwnershipInput as transferOwnershipInputModel,
+  transferOwnershipOutput as transferOwnershipOutputModel,
+  updateFormSettingsInput as updateFormSettingsInputModel,
+  updateFormSettingsOutput as updateFormSettingsOutputModel,
+} from "@repo/services/form/model";
 
 export {
-    submitFormInput as submitFormInputModel,
-    submitFormOutput as submitFormOutputModel,
-} from "@repo/services/form-submission/model"
+  submitFormInput as submitFormInputModel,
+  submitFormOutput as submitFormOutputModel,
+} from "@repo/services/form-submission/model";
diff --git a/packages/trpc/server/routes/form/route.ts b/packages/trpc/server/routes/form/route.ts
index f8db1f0..80a00d7 100644
--- a/packages/trpc/server/routes/form/route.ts
+++ b/packages/trpc/server/routes/form/route.ts
@@ -1,40 +1,42 @@
 import { z } from "zod";
 import { authenticatedProcedure, publicProcedure, router } from "../../trpc";
 import { generatePath } from "../../utils/path-generator";
-import { 
-    createFormInputModel, 
-    createFormOutputModel, 
-    listFormsByUserIdInputModel, 
-    listFormsByUserIdOutputModel,
-    createFormFieldInputModel,
-    createFormFieldOutputModel,
-    updateFormFieldInputModel,
-    updateFormFieldOutputModel,
-    deleteFormFieldInputModel,
-    deleteFormFieldOutputModel,
-    getFormFieldInputModel,
-    getFormFieldOutputModel,
-    getFormInputModel,
-    getFormOutputModel,
-    getFormByIdOutputModel,
-    publishFormOutputModel,
-    deleteFormInputModel,
-    deleteFormOutputModel,
-    submitFormInputModel,
-    submitFormOutputModel,
-    listFormFieldsInputModel,
-    listFormFieldsOutputModel,
-    getDashboardStatsOutputModel,
-    listCollaboratorsInputModel,
-    listCollaboratorsOutputModel,
-    addCollaboratorInputModel,
-    addCollaboratorOutputModel,
-    updateCollaboratorRoleInputModel,
-    updateCollaboratorRoleOutputModel,
-    removeCollaboratorInputModel,
-    removeCollaboratorOutputModel,
-    transferOwnershipInputModel,
-    transferOwnershipOutputModel
+import {
+  createFormInputModel,
+  createFormOutputModel,
+  listFormsByUserIdInputModel,
+  listFormsByUserIdOutputModel,
+  createFormFieldInputModel,
+  createFormFieldOutputModel,
+  updateFormFieldInputModel,
+  updateFormFieldOutputModel,
+  deleteFormFieldInputModel,
+  deleteFormFieldOutputModel,
+  getFormFieldInputModel,
+  getFormFieldOutputModel,
+  getFormInputModel,
+  getFormOutputModel,
+  getFormByIdOutputModel,
+  publishFormOutputModel,
+  deleteFormInputModel,
+  deleteFormOutputModel,
+  submitFormInputModel,
+  submitFormOutputModel,
+  listFormFieldsInputModel,
+  listFormFieldsOutputModel,
+  getDashboardStatsOutputModel,
+  listCollaboratorsInputModel,
+  listCollaboratorsOutputModel,
+  addCollaboratorInputModel,
+  addCollaboratorOutputModel,
+  updateCollaboratorRoleInputModel,
+  updateCollaboratorRoleOutputModel,
+  removeCollaboratorInputModel,
+  removeCollaboratorOutputModel,
+  transferOwnershipInputModel,
+  transferOwnershipOutputModel,
+  updateFormSettingsInputModel,
+  updateFormSettingsOutputModel,
 } from "./model";
 import { formService, formFieldService, formSubmissionService } from "../../services";
 
@@ -42,276 +44,308 @@ const TAGS = ["Forms"];
 const getPath = generatePath("/forms");
 
 export const formRouter = router({
-    createForm: authenticatedProcedure.meta({
-        openapi: {
-            method: "POST",
-            path: getPath("/createForm"),
-            tags: TAGS,
-            protect: true
-        }
+  createForm: authenticatedProcedure
+    .meta({
+      openapi: {
+        method: "POST",
+        path: getPath("/createForm"),
+        tags: TAGS,
+        protect: true,
+      },
     })
-        .input(createFormInputModel)
-        .output(createFormOutputModel)
-        .mutation(async ({ input, ctx }) => {
+    .input(createFormInputModel)
+    .output(createFormOutputModel)
+    .mutation(async ({ input, ctx }) => {
+      const { title, description, slug } = input;
+      const { id } = await formService.createForm({
+        title,
+        description,
+        slug,
+        ownerId: ctx.user.id,
+      });
 
-            const { title, description, slug } = input
-            const { id } = await formService.createForm({
-                title,
-                description,
-                slug,
-                ownerId: ctx.user.id
-            })
+      return { id };
+    }),
 
-            return { id }
-        }),
+  listFormsByUserId: authenticatedProcedure
+    .meta({
+      openapi: {
+        method: "GET",
+        path: getPath("/listFormsByUserId"),
+        tags: TAGS,
+        protect: true,
+      },
+    })
+    .input(listFormsByUserIdInputModel)
+    .output(listFormsByUserIdOutputModel)
+    .query(async ({ ctx }) => {
+      const forms = await formService.listFormsByUserId({ userId: ctx.user.id });
+      return forms;
+    }),
 
-    listFormsByUserId: authenticatedProcedure.meta({
-        openapi: {
-            method: "GET",
-            path: getPath("/listFormsByUserId"),
-            tags: TAGS,
-            protect: true
-        }
+  createFormField: authenticatedProcedure
+    .meta({
+      openapi: {
+        method: "POST",
+        path: getPath("/createFormField"),
+        tags: TAGS,
+        protect: true,
+      },
     })
-        .input(listFormsByUserIdInputModel)
-        .output(listFormsByUserIdOutputModel)
-        .query(async ({ ctx }) => {
-            const forms =  await formService.listFormsByUserId({ userId: ctx.user.id })
-            return forms
-        }),
+    .input(createFormFieldInputModel)
+    .output(createFormFieldOutputModel)
+    .mutation(async ({ input, ctx }) => {
+      const result = await formFieldService.createFormField({ ...input, userId: ctx.user.id });
+      return result;
+    }),
 
-    createFormField: authenticatedProcedure.meta({
-        openapi: {
-            method: "POST",
-            path: getPath("/createFormField"),
-            tags: TAGS,
-            protect: true
-        }
+  updateFormField: authenticatedProcedure
+    .meta({
+      openapi: {
+        method: "POST",
+        path: getPath("/updateFormField"),
+        tags: TAGS,
+        protect: true,
+      },
     })
-        .input(createFormFieldInputModel)
-        .output(createFormFieldOutputModel)
-        .mutation(async ({ input, ctx }) => {
-            const result = await formFieldService.createFormField({ ...input, userId: ctx.user.id })
-            return result
-        }),
+    .input(updateFormFieldInputModel)
+    .output(updateFormFieldOutputModel)
+    .mutation(async ({ input, ctx }) => {
+      const result = await formFieldService.updateFormField({ ...input, userId: ctx.user.id });
+      return result;
+    }),
 
-    updateFormField: authenticatedProcedure.meta({
-        openapi: {
-            method: "POST",
-            path: getPath("/updateFormField"),
-            tags: TAGS,
-            protect: true
-        }
+  deleteFormField: authenticatedProcedure
+    .meta({
+      openapi: {
+        method: "POST",
+        path: getPath("/deleteFormField"),
+        tags: TAGS,
+        protect: true,
+      },
     })
-        .input(updateFormFieldInputModel)
-        .output(updateFormFieldOutputModel)
-        .mutation(async ({ input, ctx }) => {
-            const result = await formFieldService.updateFormField({ ...input, userId: ctx.user.id })
-            return result
-        }),
+    .input(deleteFormFieldInputModel)
+    .output(deleteFormFieldOutputModel)
+    .mutation(async ({ input, ctx }) => {
+      const result = await formFieldService.deleteFormField({ ...input, userId: ctx.user.id });
+      return result;
+    }),
 
-    deleteFormField: authenticatedProcedure.meta({
-        openapi: {
-            method: "POST",
-            path: getPath("/deleteFormField"),
-            tags: TAGS,
-            protect: true
-        }
+  getFormField: authenticatedProcedure
+    .meta({
+      openapi: {
+        method: "GET",
+        path: getPath("/getFormField/{id}"),
+        tags: TAGS,
+        protect: true,
+      },
     })
-        .input(deleteFormFieldInputModel)
-        .output(deleteFormFieldOutputModel)
-        .mutation(async ({ input, ctx }) => {
-            const result = await formFieldService.deleteFormField({ ...input, userId: ctx.user.id })
-            return result
-        }),
+    .input(getFormFieldInputModel)
+    .output(getFormFieldOutputModel)
+    .query(async ({ input, ctx }) => {
+      const result = await formFieldService.getFormField({ ...input, userId: ctx.user.id });
+      return result;
+    }),
 
-    getFormField: authenticatedProcedure.meta({
-        openapi: {
-            method: "GET",
-            path: getPath("/getFormField/{id}"),
-            tags: TAGS,
-            protect: true
-        }
+  getForm: authenticatedProcedure
+    .meta({
+      openapi: {
+        method: "GET",
+        path: getPath("/getForm/{id}"),
+        tags: TAGS,
+        protect: true,
+      },
     })
-        .input(getFormFieldInputModel)
-        .output(getFormFieldOutputModel)
-        .query(async ({ input, ctx }) => {
-            const result = await formFieldService.getFormField({ ...input, userId: ctx.user.id })
-            return result
-        }),
+    .input(getFormInputModel)
+    .output(getFormOutputModel)
+    .query(async ({ input, ctx }) => {
+      const result = await formService.getForm({ ...input, userId: ctx.user.id });
+      return result;
+    }),
 
-    getForm: authenticatedProcedure.meta({
-        openapi: {
-            method: "GET",
-            path: getPath("/getForm/{id}"),
-            tags: TAGS,
-            protect: true
-        }
+  listFormFields: authenticatedProcedure
+    .meta({
+      openapi: {
+        method: "GET",
+        path: getPath("/listFormFields/{formId}"),
+        tags: TAGS,
+        protect: true,
+      },
     })
-        .input(getFormInputModel)
-        .output(getFormOutputModel)
-        .query(async ({ input, ctx }) => {
-            const result = await formService.getForm({ ...input, userId: ctx.user.id })
-            return result
-        }),
+    .input(listFormFieldsInputModel)
+    .output(listFormFieldsOutputModel)
+    .query(async ({ input, ctx }) => {
+      const result = await formFieldService.listFormFields({ ...input, userId: ctx.user.id });
+      return result;
+    }),
 
-    listFormFields: authenticatedProcedure.meta({
-        openapi: {
-            method: "GET",
-            path: getPath("/listFormFields/{formId}"),
-            tags: TAGS,
-            protect: true
-        }
+  getFormById: publicProcedure
+    .meta({
+      openapi: {
+        method: "GET",
+        path: getPath("/getFormById/{id}"),
+        tags: TAGS,
+        protect: false,
+      },
     })
-        .input(listFormFieldsInputModel)
-        .output(listFormFieldsOutputModel)
-        .query(async ({ input, ctx }) => {
-            const result = await formFieldService.listFormFields({ ...input, userId: ctx.user.id })
-            return result
-        }),
+    .input(getFormInputModel)
+    .output(getFormByIdOutputModel)
+    .query(async ({ input }) => {
+      const result = await formService.getFormById(input);
+      return result;
+    }),
 
-    getFormById: publicProcedure.meta({
-        openapi: {
-            method: "GET",
-            path: getPath("/getFormById/{id}"),
-            tags: TAGS,
-            protect: false
-        }
+  publishForm: authenticatedProcedure
+    .meta({
+      openapi: {
+        method: "POST",
+        path: getPath("/publishForm"),
+        tags: TAGS,
+        protect: true,
+      },
     })
-        .input(getFormInputModel)
-        .output(getFormByIdOutputModel)
-        .query(async ({ input }) => {
-            const result = await formService.getFormById(input)
-            return result
-        }),
+    .input(getFormInputModel)
+    .output(publishFormOutputModel)
+    .mutation(async ({ input, ctx }) => {
+      const result = await formService.publishForm({ ...input, ownerId: ctx.user.id });
+      return result;
+    }),
 
-    publishForm: authenticatedProcedure.meta({
-        openapi: {
-            method: "POST",
-            path: getPath("/publishForm"),
-            tags: TAGS,
-            protect: true
-        }
+  getDashboardStats: authenticatedProcedure
+    .meta({
+      openapi: {
+        method: "GET",
+        path: getPath("/getDashboardStats"),
+        tags: TAGS,
+        protect: true,
+      },
     })
-        .input(getFormInputModel)
-        .output(publishFormOutputModel)
-        .mutation(async ({ input, ctx }) => {
-            const result = await formService.publishForm({ ...input, ownerId: ctx.user.id })
-            return result
-        }),
+    .input(z.undefined())
+    .output(getDashboardStatsOutputModel)
+    .query(async ({ ctx }) => {
+      const result = await formService.getDashboardStats({ userId: ctx.user.id });
+      return result;
+    }),
 
-    getDashboardStats: authenticatedProcedure.meta({
-        openapi: {
-            method: "GET",
-            path: getPath("/getDashboardStats"),
-            tags: TAGS,
-            protect: true
-        }
+  deleteForm: authenticatedProcedure
+    .meta({
+      openapi: {
+        method: "POST",
+        path: getPath("/deleteForm"),
+        tags: TAGS,
+        protect: true,
+      },
     })
-        .input(z.undefined())
-        .output(getDashboardStatsOutputModel)
-        .query(async ({ ctx }) => {
-            const result = await formService.getDashboardStats({ userId: ctx.user.id })
-            return result
-        }),
+    .input(deleteFormInputModel)
+    .output(deleteFormOutputModel)
+    .mutation(async ({ input, ctx }) => {
+      const result = await formService.deleteForm({ id: input.id, ownerId: ctx.user.id });
+      return result;
+    }),
 
-    deleteForm: authenticatedProcedure.meta({
-        openapi: {
-            method: "POST",
-            path: getPath("/deleteForm"),
-            tags: TAGS,
-            protect: true
-        }
+  submitForm: publicProcedure
+    .meta({
+      openapi: {
+        method: "POST",
+        path: getPath("/submitForm"),
+        tags: TAGS,
+        protect: false,
+      },
     })
-        .input(deleteFormInputModel)
-        .output(deleteFormOutputModel)
-        .mutation(async ({ input, ctx }) => {
-            const result = await formService.deleteForm({ id: input.id, ownerId: ctx.user.id })
-            return result
-        }),
+    .input(submitFormInputModel)
+    .output(submitFormOutputModel)
+    .mutation(async ({ input }) => {
+      const result = await formSubmissionService.submitForm(input);
+      return result;
+    }),
 
-    submitForm: publicProcedure.meta({
-        openapi: {
-            method: "POST",
-            path: getPath("/submitForm"),
-            tags: TAGS,
-            protect: false
-        }
+  listCollaborators: authenticatedProcedure
+    .meta({
+      openapi: {
+        method: "GET",
+        path: getPath("/listCollaborators"),
+        tags: TAGS,
+        protect: true,
+      },
     })
-        .input(submitFormInputModel)
-        .output(submitFormOutputModel)
-        .mutation(async ({ input }) => {
-            const result = await formSubmissionService.submitForm(input)
-            return result
-        }),
+    .input(listCollaboratorsInputModel)
+    .output(listCollaboratorsOutputModel)
+    .query(async ({ input, ctx }) => {
+      return formService.listCollaborators({ ...input, userId: ctx.user.id });
+    }),
 
-    listCollaborators: authenticatedProcedure.meta({
-        openapi: {
-            method: "GET",
-            path: getPath("/listCollaborators"),
-            tags: TAGS,
-            protect: true
-        }
+  addCollaborator: authenticatedProcedure
+    .meta({
+      openapi: {
+        method: "POST",
+        path: getPath("/addCollaborator"),
+        tags: TAGS,
+        protect: true,
+      },
     })
-        .input(listCollaboratorsInputModel)
-        .output(listCollaboratorsOutputModel)
-        .query(async ({ input, ctx }) => {
-            return formService.listCollaborators({ ...input, userId: ctx.user.id })
-        }),
+    .input(addCollaboratorInputModel)
+    .output(addCollaboratorOutputModel)
+    .mutation(async ({ input, ctx }) => {
+      return formService.addCollaborator({ ...input, requesterId: ctx.user.id });
+    }),
 
-    addCollaborator: authenticatedProcedure.meta({
-        openapi: {
-            method: "POST",
-            path: getPath("/addCollaborator"),
-            tags: TAGS,
-            protect: true
-        }
+  updateCollaboratorRole: authenticatedProcedure
+    .meta({
+      openapi: {
+        method: "POST",
+        path: getPath("/updateCollaboratorRole"),
+        tags: TAGS,
+        protect: true,
+      },
     })
-        .input(addCollaboratorInputModel)
-        .output(addCollaboratorOutputModel)
-        .mutation(async ({ input, ctx }) => {
-            return formService.addCollaborator({ ...input, requesterId: ctx.user.id })
-        }),
+    .input(updateCollaboratorRoleInputModel)
+    .output(updateCollaboratorRoleOutputModel)
+    .mutation(async ({ input, ctx }) => {
+      return formService.updateCollaboratorRole({ ...input, requesterId: ctx.user.id });
+    }),
 
-    updateCollaboratorRole: authenticatedProcedure.meta({
-        openapi: {
-            method: "POST",
-            path: getPath("/updateCollaboratorRole"),
-            tags: TAGS,
-            protect: true
-        }
+  removeCollaborator: authenticatedProcedure
+    .meta({
+      openapi: {
+        method: "POST",
+        path: getPath("/removeCollaborator"),
+        tags: TAGS,
+        protect: true,
+      },
     })
-        .input(updateCollaboratorRoleInputModel)
-        .output(updateCollaboratorRoleOutputModel)
-        .mutation(async ({ input, ctx }) => {
-            return formService.updateCollaboratorRole({ ...input, requesterId: ctx.user.id })
-        }),
+    .input(removeCollaboratorInputModel)
+    .output(removeCollaboratorOutputModel)
+    .mutation(async ({ input, ctx }) => {
+      return formService.removeCollaborator({ ...input, requesterId: ctx.user.id });
+    }),
 
-    removeCollaborator: authenticatedProcedure.meta({
-        openapi: {
-            method: "POST",
-            path: getPath("/removeCollaborator"),
-            tags: TAGS,
-            protect: true
-        }
+  transferOwnership: authenticatedProcedure
+    .meta({
+      openapi: {
+        method: "POST",
+        path: getPath("/transferOwnership"),
+        tags: TAGS,
+        protect: true,
+      },
     })
-        .input(removeCollaboratorInputModel)
-        .output(removeCollaboratorOutputModel)
-        .mutation(async ({ input, ctx }) => {
-            return formService.removeCollaborator({ ...input, requesterId: ctx.user.id })
-        }),
+    .input(transferOwnershipInputModel)
+    .output(transferOwnershipOutputModel)
+    .mutation(async ({ input, ctx }) => {
+      return formService.transferOwnership({ ...input, requesterId: ctx.user.id });
+    }),
 
-    transferOwnership: authenticatedProcedure.meta({
-        openapi: {
-            method: "POST",
-            path: getPath("/transferOwnership"),
-            tags: TAGS,
-            protect: true
-        }
+  updateFormSettings: authenticatedProcedure
+    .meta({
+      openapi: {
+        method: "POST",
+        path: getPath("/updateFormSettings"),
+        tags: TAGS,
+        protect: true,
+      },
     })
-        .input(transferOwnershipInputModel)
-        .output(transferOwnershipOutputModel)
-        .mutation(async ({ input, ctx }) => {
-            return formService.transferOwnership({ ...input, requesterId: ctx.user.id })
-        })
+    .input(updateFormSettingsInputModel)
+    .output(updateFormSettingsOutputModel)
+    .mutation(async ({ input, ctx }) => {
+      return formService.updateFormSettings({ ...input, requesterId: ctx.user.id });
+    }),
 });
diff --git a/packages/trpc/server/routes/user/route.ts b/packages/trpc/server/routes/user/route.ts
index 7108c2b..46cad2d 100644
--- a/packages/trpc/server/routes/user/route.ts
+++ b/packages/trpc/server/routes/user/route.ts
@@ -1,9 +1,9 @@
-import { z } from "zod"
-import { authenticatedProcedure, router } from "../../trpc"
-import { generatePath } from "../../utils/path-generator"
+import { z } from "zod";
+import { authenticatedProcedure, router } from "../../trpc";
+import { generatePath } from "../../utils/path-generator";
 
-const TAGS = ["User"]
-const getPath = generatePath("/user")
+const TAGS = ["User"];
+const getPath = generatePath("/user");
 
 export const userRouter = router({
   /**
@@ -20,29 +20,81 @@ export const userRouter = router({
       },
     })
     .input(z.undefined())
-    .output(z.object({
-      id: z.string(),
-      name: z.string(),
-      email: z.string(),
-      plan: z.enum(["Free", "Pro", "Pro+", "Business"]),
-    }))
+    .output(
+      z.object({
+        id: z.string(),
+        name: z.string(),
+        email: z.string(),
+        plan: z.enum(["Free", "Pro", "Pro+", "Business"]),
+      }),
+    )
     .query(async ({ ctx }) => {
-      const { eq: dbEq, usersTable: users } = await import("@repo/database")
-      const { db } = await import("@repo/database")
+      const { eq: dbEq, usersTable: users } = await import("@repo/database");
+      const { db } = await import("@repo/database");
 
       const rows = await db
         .select({ id: users.id, name: users.name, email: users.email, plan: users.plan })
         .from(users)
-        .where(dbEq(users.id, ctx.user.id))
+        .where(dbEq(users.id, ctx.user.id));
 
-      const user = rows[0]
-      if (!user) throw new Error("User not found")
+      const user = rows[0];
+      if (!user) throw new Error("User not found");
 
       return {
         id: user.id,
         name: user.name,
         email: user.email,
         plan: user.plan,
-      }
+      };
     }),
-})
+
+  searchUsers: authenticatedProcedure
+    .meta({
+      openapi: {
+        method: "GET",
+        path: getPath("/search"),
+        tags: TAGS,
+        protect: true,
+      },
+    })
+    .input(
+      z.object({
+        query: z.string(),
+      }),
+    )
+    .output(
+      z.array(
+        z.object({
+          id: z.string(),
+          name: z.string(),
+          email: z.string(),
+        }),
+      ),
+    )
+    .query(async ({ input, ctx }) => {
+      const {
+        ilike: dbILike,
+        or: dbOr,
+        and: dbAnd,
+        ne: dbNe,
+        usersTable: users,
+      } = await import("@repo/database");
+      const { db } = await import("@repo/database");
+
+      const searchVal = input.query.trim();
+      if (searchVal.length < 2) return [];
+
+      const rows = await db
+        .select({ id: users.id, name: users.name, email: users.email })
+        .from(users)
+        .where(
+          dbAnd(
+            dbNe(users.id, ctx.user.id),
+            dbOr(dbILike(users.email, `%${searchVal}%`), dbILike(users.name, `%${searchVal}%`)),
+          ),
+        )
+        .limit(10);
+
+      return rows;
+    }),
+});
diff --git a/packages/trpc/server/trpc.ts b/packages/trpc/server/trpc.ts
index b976511..4e0ca73 100644
--- a/packages/trpc/server/trpc.ts
+++ b/packages/trpc/server/trpc.ts
@@ -4,32 +4,29 @@ import { OpenApiMeta } from "trpc-to-openapi";
 import { createContext } from "./context";
 import { auth } from "./auth";
 
-export const tRPCContext = initTRPC
-  .meta<OpenApiMeta>()
-  .context<typeof createContext>()
-  .create({});
+export const tRPCContext = initTRPC.meta<OpenApiMeta>().context<typeof createContext>().create({});
 
 export const router = tRPCContext.router;
 
 export const publicProcedure = tRPCContext.procedure;
 
-export const authenticatedProcedure = tRPCContext.procedure.use(async options => {
-  const { ctx } = options
-  const tStart = Date.now()
+export const authenticatedProcedure = tRPCContext.procedure.use(async (options) => {
+  const { ctx } = options;
+  const tStart = Date.now();
 
   const session = await auth.api.getSession({
     headers: new Headers(ctx.req.headers as Record<string, string>),
-  })
-  const tSession = Date.now() - tStart
+  });
+  const tSession = Date.now() - tStart;
 
   if (!session) {
     throw new TRPCError({
       code: "UNAUTHORIZED",
       message: "User is not logged in",
-    })
+    });
   }
 
-  const tInner = Date.now()
+  const tInner = Date.now();
   const result = await options.next({
     ctx: {
       ...ctx,
@@ -37,55 +34,55 @@ export const authenticatedProcedure = tRPCContext.procedure.use(async options =>
         id: session.user.id,
         email: session.user.email,
         name: session.user.name,
-      }
-    }
-  })
-  const tInnerMs = Date.now() - tInner
+      },
+    },
+  });
+  const tInnerMs = Date.now() - tInner;
 
   // Server-Timing header lets us read these from the browser DevTools
   // without trying to read the dev-server's TUI. Comma-separated entries
   // per the W3C spec.
   try {
-    const h = new Headers()
-    h.set("Server-Timing", `auth;dur=${tSession}, inner;dur=${tInnerMs}`)
-    ;(ctx as any).setHeaders?.(h)
+    const h = new Headers();
+    h.set("Server-Timing", `auth;dur=${tSession}, inner;dur=${tInnerMs}`);
+    (ctx as any).setHeaders?.(h);
   } catch {
     /* noop — header may already be sent */
   }
 
-  return result
-})
+  return result;
+});
 
 /**
  * Procedure that requires Pro+ or Business tier.
  * Fetches the user's plan from DB and throws FORBIDDEN for Free and Pro users.
  */
-export const proAuthenticatedProcedure = authenticatedProcedure.use(async options => {
-  const { ctx } = options
+export const proAuthenticatedProcedure = authenticatedProcedure.use(async (options) => {
+  const { ctx } = options;
 
   // Import eq from @repo/database to avoid drizzle version mismatch
-  const { eq: dbEq, usersTable: users } = await import("@repo/database")
-  const { db: database } = await import("@repo/database")
+  const { eq: dbEq, usersTable: users } = await import("@repo/database");
+  const { db: database } = await import("@repo/database");
 
   const rows = await database
     .select({ plan: users.plan })
     .from(users)
-    .where(dbEq(users.id, ctx.user.id))
+    .where(dbEq(users.id, ctx.user.id));
 
-  const plan = rows[0]?.plan ?? "Free"
-  const hasDetailedAnalytics = plan === "Pro+" || plan === "Business"
+  const plan = rows[0]?.plan ?? "Free";
+  const hasDetailedAnalytics = plan === "Pro+" || plan === "Business";
 
   if (!hasDetailedAnalytics) {
     throw new TRPCError({
       code: "FORBIDDEN",
       message: "Upgrade to Pro+ or Business to access detailed analytics",
-    })
+    });
   }
 
   return options.next({
     ctx: {
       ...ctx,
       user: { ...ctx.user, plan },
-    }
-  })
-})
+    },
+  });
+});