From 30c6d200e836040ddef8c509da1f0285da18c22f Mon Sep 17 00:00:00 2001
From: Aneeb <aneebbaig123@gmail.com>
Date: Sat, 4 Jul 2026 17:52:38 +0500
Subject: [PATCH 1/2] Redesign UI: teal brand, light+dark theme, elevation,
 table polish

Bland flat dark-only UI with generic indigo accent and hardcoded
dark-only status colors (unreadable if light mode ever shipped).
Wires up next-themes (already a dependency, unused), swaps accent to
teal, adds real elevation layering, promotes status colors to
semantic theme tokens, and upgrades the shared DataTable primitive
(pagination, sticky header) used by every table in the app.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vo2PcDtDzHok5EFJ4STR8F
---
 public/icon.svg                               |   2 +-
 public/manifest.json                          |   4 +-
 src/app/(app)/account/ai-settings-card.tsx    |   4 +-
 .../(app)/account/change-password-form.tsx    |   6 +-
 src/app/(app)/account/page.tsx                |   2 +-
 src/app/(app)/financials/page.tsx             |   4 +-
 .../[id]/cost-sheet/cost-import-button.tsx    |   4 +-
 .../[id]/cost-sheet/cost-item-form-button.tsx |   4 +-
 .../[id]/cost-sheet/cost-sheet-board.tsx      |   6 +-
 .../(app)/hustles/[id]/cost-sheet/page.tsx    |   2 +-
 .../[id]/cost-sheet/product-form-button.tsx   |   4 +-
 .../[id]/customers/[customerId]/page.tsx      |   2 +-
 .../[id]/customers/customer-form-button.tsx   |   4 +-
 .../[id]/customers/customers-table.tsx        |   2 +-
 src/app/(app)/hustles/[id]/customers/page.tsx |   2 +-
 .../[id]/financials/financials-board.tsx      |   6 +-
 .../(app)/hustles/[id]/financials/page.tsx    |   2 +-
 .../financials/transaction-form-button.tsx    |   4 +-
 .../inventory/inventory-adjust-button.tsx     |   4 +-
 .../[id]/inventory/inventory-form-button.tsx  |   4 +-
 .../inventory/inventory-import-button.tsx     |   4 +-
 .../[id]/inventory/inventory-table.tsx        |   2 +-
 src/app/(app)/hustles/[id]/inventory/page.tsx |   2 +-
 src/app/(app)/hustles/[id]/loading.tsx        |   2 +-
 .../orders/[orderId]/order-payment-dialog.tsx |   2 +-
 .../hustles/[id]/orders/[orderId]/page.tsx    |   2 +-
 .../(app)/hustles/[id]/orders/order-form.tsx  |   8 +-
 src/app/(app)/hustles/[id]/orders/page.tsx    |   2 +-
 src/app/(app)/hustles/[id]/page.tsx           |  14 +--
 src/app/(app)/hustles/[id]/products/page.tsx  |   2 +-
 .../[id]/products/product-detail-sheet.tsx    |   2 +-
 src/app/(app)/hustles/[id]/research/page.tsx  |   2 +-
 .../hustles/[id]/research/research-board.tsx  |   2 +-
 .../hustles/[id]/research/research-sheet.tsx  |   6 +-
 .../hustles/[id]/settings/danger-zone.tsx     |   4 +-
 src/app/(app)/hustles/[id]/settings/page.tsx  |   2 +-
 .../[id]/suppliers/[supplierId]/page.tsx      |   2 +-
 src/app/(app)/hustles/[id]/suppliers/page.tsx |   2 +-
 .../hustles/[id]/suppliers/supplier-form.tsx  |   6 +-
 .../[id]/suppliers/suppliers-table.tsx        |   2 +-
 src/app/(app)/hustles/[id]/tasks/page.tsx     |   2 +-
 .../hustles/[id]/tasks/task-form-button.tsx   |   2 +-
 .../(app)/hustles/[id]/tasks/tasks-board.tsx  |  10 +-
 src/app/(app)/hustles/hustle-form.tsx         |   8 +-
 src/app/(app)/hustles/loading.tsx             |   2 +-
 src/app/(app)/hustles/page.tsx                |   2 +-
 src/app/(app)/loading.tsx                     |   2 +-
 src/app/(app)/page.tsx                        |   2 +-
 src/app/(auth)/login/login-form.tsx           |   4 +-
 src/app/(auth)/setup/setup-form.tsx           |   8 +-
 src/app/globals.css                           | 115 +++++++++++++-----
 src/app/layout.tsx                            |  11 +-
 src/app/track/[orderId]/page.tsx              |   2 +-
 src/components/charts/donut-chart.tsx         |  13 +-
 src/components/charts/grouped-bar-chart.tsx   |  16 ++-
 src/components/charts/line-chart.tsx          |  16 ++-
 src/components/charts/palette.ts              |  14 +--
 src/components/charts/stacked-bar-chart.tsx   |  13 +-
 src/components/layout/sidebar.tsx             |   5 +-
 src/components/layout/topbar.tsx              |   4 +-
 src/components/shared/currency.tsx            |   8 +-
 src/components/shared/data-table.tsx          |  77 +++++++++++-
 src/components/shared/stat-card.tsx           |  24 +++-
 src/components/shared/theme-toggle.tsx        |  37 ++++++
 src/components/ui/badge.tsx                   |   8 +-
 src/components/ui/card.tsx                    |   8 +-
 src/components/ui/sonner.tsx                  |   4 +-
 src/lib/constants.ts                          |  66 +++++-----
 src/schemas/hustle.ts                         |   2 +-
 69 files changed, 418 insertions(+), 209 deletions(-)
 create mode 100644 src/components/shared/theme-toggle.tsx

diff --git a/public/icon.svg b/public/icon.svg
index 4a11f0d..648fee1 100644
--- a/public/icon.svg
+++ b/public/icon.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
-  <rect width="32" height="32" rx="7" fill="#6366f1"/>
+  <rect width="32" height="32" rx="7" fill="#0f766e"/>
   <rect x="6" y="6" width="5" height="20" rx="1" fill="white"/>
   <rect x="21" y="6" width="5" height="20" rx="1" fill="white"/>
   <rect x="6" y="13.5" width="20" height="5" rx="1" fill="white"/>
diff --git a/public/manifest.json b/public/manifest.json
index 7f491c3..03e55cf 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -2,8 +2,8 @@
   "name": "Sidekit",
   "short_name": "Sidekit",
   "description": "Operating system for solo founders managing multiple businesses.",
-  "theme_color": "#6366f1",
-  "background_color": "#0f172a",
+  "theme_color": "#0a0a0d",
+  "background_color": "#0a0a0d",
   "display": "standalone",
   "orientation": "portrait",
   "start_url": "/",
diff --git a/src/app/(app)/account/ai-settings-card.tsx b/src/app/(app)/account/ai-settings-card.tsx
index 4ff3965..9647412 100644
--- a/src/app/(app)/account/ai-settings-card.tsx
+++ b/src/app/(app)/account/ai-settings-card.tsx
@@ -125,7 +125,7 @@ export function AiSettingsCard({ provider, model, baseUrl, hasKey }: Props) {
                 {revealKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
               </Button>
             </div>
-            {errors.apiKey ? <p className="text-xs text-rose-300">{errors.apiKey.message}</p> : null}
+            {errors.apiKey ? <p className="text-xs text-destructive">{errors.apiKey.message}</p> : null}
           </div>
 
           <div className="grid grid-cols-2 gap-3">
@@ -138,7 +138,7 @@ export function AiSettingsCard({ provider, model, baseUrl, hasKey }: Props) {
                 <Label>Base URL</Label>
                 <Input placeholder="https://api.example.com/v1" {...register("baseUrl")} />
                 {errors.baseUrl ? (
-                  <p className="text-xs text-rose-300">{errors.baseUrl.message}</p>
+                  <p className="text-xs text-destructive">{errors.baseUrl.message}</p>
                 ) : null}
               </div>
             ) : null}
diff --git a/src/app/(app)/account/change-password-form.tsx b/src/app/(app)/account/change-password-form.tsx
index e2f36d6..a54da53 100644
--- a/src/app/(app)/account/change-password-form.tsx
+++ b/src/app/(app)/account/change-password-form.tsx
@@ -50,7 +50,7 @@ export function ChangePasswordForm() {
           {...register("currentPassword")}
         />
         {errors.currentPassword ? (
-          <p className="text-xs text-rose-300">{errors.currentPassword.message}</p>
+          <p className="text-xs text-destructive">{errors.currentPassword.message}</p>
         ) : null}
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
@@ -63,7 +63,7 @@ export function ChangePasswordForm() {
             {...register("newPassword")}
           />
           {errors.newPassword ? (
-            <p className="text-xs text-rose-300">{errors.newPassword.message}</p>
+            <p className="text-xs text-destructive">{errors.newPassword.message}</p>
           ) : null}
         </div>
         <div className="space-y-2">
@@ -75,7 +75,7 @@ export function ChangePasswordForm() {
             {...register("confirmPassword")}
           />
           {errors.confirmPassword ? (
-            <p className="text-xs text-rose-300">{errors.confirmPassword.message}</p>
+            <p className="text-xs text-destructive">{errors.confirmPassword.message}</p>
           ) : null}
         </div>
       </div>
diff --git a/src/app/(app)/account/page.tsx b/src/app/(app)/account/page.tsx
index 835f6cb..b94fd8e 100644
--- a/src/app/(app)/account/page.tsx
+++ b/src/app/(app)/account/page.tsx
@@ -16,7 +16,7 @@ export default async function AccountPage() {
   if (!user) redirect("/login");
 
   return (
-    <div className="p-6 space-y-6 max-w-3xl">
+    <div className="p-6 lg:p-8 space-y-6 max-w-3xl">
       <PageHeader title="Account" description="Owner profile and security settings." />
 
       <Card>
diff --git a/src/app/(app)/financials/page.tsx b/src/app/(app)/financials/page.tsx
index e956450..ec32df4 100644
--- a/src/app/(app)/financials/page.tsx
+++ b/src/app/(app)/financials/page.tsx
@@ -71,7 +71,7 @@ export default async function ConsolidatedFinancialsPage({
   const allTransactions = await transactionService.list({ from, to });
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 lg:p-8 space-y-6">
       <PageHeader
         title="Consolidated financials"
         description="Combined view across all hustles."
@@ -170,7 +170,7 @@ export default async function ConsolidatedFinancialsPage({
               id: t.id,
               hustleId: t.hustleId,
               hustleName: t.hustle?.name ?? "",
-              hustleColor: t.hustle?.color ?? "#6366f1",
+              hustleColor: t.hustle?.color ?? "#14b8a6",
               currency: t.hustle?.currency ?? "PKR",
               type: t.type,
               category: t.category,
diff --git a/src/app/(app)/hustles/[id]/cost-sheet/cost-import-button.tsx b/src/app/(app)/hustles/[id]/cost-sheet/cost-import-button.tsx
index c19b452..ca8de34 100644
--- a/src/app/(app)/hustles/[id]/cost-sheet/cost-import-button.tsx
+++ b/src/app/(app)/hustles/[id]/cost-sheet/cost-import-button.tsx
@@ -183,9 +183,9 @@ export function CostImportButton({ hustleId, defaultProductId }: Props) {
               onChange={handleFile}
             />
             {parseError ? (
-              <p className="text-xs text-rose-300">{parseError}</p>
+              <p className="text-xs text-destructive">{parseError}</p>
             ) : parsed ? (
-              <p className="text-xs text-emerald-300">{parsed.length} item{parsed.length === 1 ? "" : "s"} ready to import.</p>
+              <p className="text-xs text-success">{parsed.length} item{parsed.length === 1 ? "" : "s"} ready to import.</p>
             ) : null}
           </div>
 
diff --git a/src/app/(app)/hustles/[id]/cost-sheet/cost-item-form-button.tsx b/src/app/(app)/hustles/[id]/cost-sheet/cost-item-form-button.tsx
index 6e054ae..a556689 100644
--- a/src/app/(app)/hustles/[id]/cost-sheet/cost-item-form-button.tsx
+++ b/src/app/(app)/hustles/[id]/cost-sheet/cost-item-form-button.tsx
@@ -132,7 +132,7 @@ export function CostItemFormButton({ hustleId, suppliers, products, item, trigge
           <div className="space-y-2">
             <Label>Name</Label>
             <Input {...register("name")} />
-            {errors.name ? <p className="text-xs text-rose-300">{errors.name.message}</p> : null}
+            {errors.name ? <p className="text-xs text-destructive">{errors.name.message}</p> : null}
           </div>
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-2">
@@ -230,7 +230,7 @@ export function CostItemFormButton({ hustleId, suppliers, products, item, trigge
           <div className="space-y-2">
             <Label>URL (optional)</Label>
             <Input type="url" placeholder="https://" {...register("url")} />
-            {errors.url ? <p className="text-xs text-rose-300">{errors.url.message}</p> : null}
+            {errors.url ? <p className="text-xs text-destructive">{errors.url.message}</p> : null}
           </div>
           <div className="flex justify-end gap-2">
             <Button type="button" variant="outline" onClick={() => setOpen(false)}>
diff --git a/src/app/(app)/hustles/[id]/cost-sheet/cost-sheet-board.tsx b/src/app/(app)/hustles/[id]/cost-sheet/cost-sheet-board.tsx
index ba97664..8c81d7b 100644
--- a/src/app/(app)/hustles/[id]/cost-sheet/cost-sheet-board.tsx
+++ b/src/app/(app)/hustles/[id]/cost-sheet/cost-sheet-board.tsx
@@ -214,7 +214,7 @@ export function CostSheetBoard({ hustleId, currency, items, suppliers, products
                   confirmLabel="Delete product"
                   onConfirm={() => handleDeleteProduct(activeProduct.id)}
                   trigger={
-                    <Button variant="ghost" size="sm" className="gap-1 h-7 text-xs text-rose-400 hover:text-rose-300">
+                    <Button variant="ghost" size="sm" className="gap-1 h-7 text-xs text-destructive hover:text-destructive">
                       <Trash2 className="h-3 w-3" /> Delete product
                     </Button>
                   }
@@ -364,7 +364,7 @@ export function CostSheetBoard({ hustleId, currency, items, suppliers, products
                                     onConfirm={() => handleDelete(i.id)}
                                     trigger={
                                       <DropdownMenuItem
-                                        className="text-rose-300 focus:text-rose-200"
+                                        className="text-destructive focus:text-destructive"
                                         onSelect={(e) => e.preventDefault()}
                                       >
                                         <Trash2 className="h-4 w-4" /> Delete
@@ -457,7 +457,7 @@ export function CostSheetBoard({ hustleId, currency, items, suppliers, products
               <Row
                 label="Margin"
                 value={
-                  <span className={`font-mono ${grossMargin >= 30 ? "text-emerald-300" : grossMargin >= 10 ? "text-amber-300" : "text-rose-300"}`}>
+                  <span className={`font-mono ${grossMargin >= 30 ? "text-success" : grossMargin >= 10 ? "text-warning" : "text-destructive"}`}>
                     {percent(grossMargin)}
                   </span>
                 }
diff --git a/src/app/(app)/hustles/[id]/cost-sheet/page.tsx b/src/app/(app)/hustles/[id]/cost-sheet/page.tsx
index 2e06339..1f58830 100644
--- a/src/app/(app)/hustles/[id]/cost-sheet/page.tsx
+++ b/src/app/(app)/hustles/[id]/cost-sheet/page.tsx
@@ -32,7 +32,7 @@ export default async function CostSheetPage({ params }: { params: Promise<{ id:
   }));
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 lg:p-8 space-y-6">
       <PageHeader
         title="Cost sheet"
         description="Break down every cost. Then explore margins with the live calculator."
diff --git a/src/app/(app)/hustles/[id]/cost-sheet/product-form-button.tsx b/src/app/(app)/hustles/[id]/cost-sheet/product-form-button.tsx
index 7035b59..4767a91 100644
--- a/src/app/(app)/hustles/[id]/cost-sheet/product-form-button.tsx
+++ b/src/app/(app)/hustles/[id]/cost-sheet/product-form-button.tsx
@@ -107,7 +107,7 @@ export function ProductFormButton({ hustleId, item, trigger }: Props) {
           <div className="space-y-2">
             <Label>Product name</Label>
             <Input {...register("name")} placeholder="e.g. Rose Gold Nikkah Plaque" />
-            {errors.name ? <p className="text-xs text-rose-300">{errors.name.message}</p> : null}
+            {errors.name ? <p className="text-xs text-destructive">{errors.name.message}</p> : null}
           </div>
           <div className="space-y-2">
             <Label>Status</Label>
@@ -139,7 +139,7 @@ export function ProductFormButton({ hustleId, item, trigger }: Props) {
             <Label>Cover image URL (optional)</Label>
             <Input type="url" placeholder="https://" {...register("coverImageUrl")} />
             {errors.coverImageUrl ? (
-              <p className="text-xs text-rose-300">{errors.coverImageUrl.message}</p>
+              <p className="text-xs text-destructive">{errors.coverImageUrl.message}</p>
             ) : null}
           </div>
           <div className="space-y-2">
diff --git a/src/app/(app)/hustles/[id]/customers/[customerId]/page.tsx b/src/app/(app)/hustles/[id]/customers/[customerId]/page.tsx
index c267b0e..ea07e2c 100644
--- a/src/app/(app)/hustles/[id]/customers/[customerId]/page.tsx
+++ b/src/app/(app)/hustles/[id]/customers/[customerId]/page.tsx
@@ -34,7 +34,7 @@ export default async function CustomerDetailPage({
   const totalSpent = customer.orders.reduce((s, o) => s + toNumber(o.total), 0);
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 lg:p-8 space-y-6">
       <PageHeader
         title={customer.name}
         breadcrumbs={[
diff --git a/src/app/(app)/hustles/[id]/customers/customer-form-button.tsx b/src/app/(app)/hustles/[id]/customers/customer-form-button.tsx
index 61eefd2..0095722 100644
--- a/src/app/(app)/hustles/[id]/customers/customer-form-button.tsx
+++ b/src/app/(app)/hustles/[id]/customers/customer-form-button.tsx
@@ -104,7 +104,7 @@ export function CustomerFormButton({ hustleId, customer, trigger }: Props) {
           <div className="space-y-2">
             <Label>Name</Label>
             <Input {...register("name")} />
-            {errors.name ? <p className="text-xs text-rose-300">{errors.name.message}</p> : null}
+            {errors.name ? <p className="text-xs text-destructive">{errors.name.message}</p> : null}
           </div>
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-2">
@@ -114,7 +114,7 @@ export function CustomerFormButton({ hustleId, customer, trigger }: Props) {
             <div className="space-y-2">
               <Label>Email</Label>
               <Input type="email" {...register("email")} />
-              {errors.email ? <p className="text-xs text-rose-300">{errors.email.message}</p> : null}
+              {errors.email ? <p className="text-xs text-destructive">{errors.email.message}</p> : null}
             </div>
           </div>
           <div className="grid grid-cols-2 gap-3">
diff --git a/src/app/(app)/hustles/[id]/customers/customers-table.tsx b/src/app/(app)/hustles/[id]/customers/customers-table.tsx
index be3afd9..496a497 100644
--- a/src/app/(app)/hustles/[id]/customers/customers-table.tsx
+++ b/src/app/(app)/hustles/[id]/customers/customers-table.tsx
@@ -96,7 +96,7 @@ export function CustomersTable({ hustleId, customers }: Props) {
               onConfirm={() => handleDelete(c.id)}
               trigger={
                 <DropdownMenuItem
-                  className="text-rose-300 focus:text-rose-200"
+                  className="text-destructive focus:text-destructive"
                   onSelect={(e) => e.preventDefault()}
                 >
                   <Trash2 className="h-4 w-4" /> Delete
diff --git a/src/app/(app)/hustles/[id]/customers/page.tsx b/src/app/(app)/hustles/[id]/customers/page.tsx
index 87d07d2..4bcd433 100644
--- a/src/app/(app)/hustles/[id]/customers/page.tsx
+++ b/src/app/(app)/hustles/[id]/customers/page.tsx
@@ -11,7 +11,7 @@ export default async function CustomersPage({ params }: { params: Promise<{ id:
   const customers = await customerService.list(id);
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 lg:p-8 space-y-6">
       <PageHeader
         title="Customers"
         description="People you sell to."
diff --git a/src/app/(app)/hustles/[id]/financials/financials-board.tsx b/src/app/(app)/hustles/[id]/financials/financials-board.tsx
index 01acaed..7af97f3 100644
--- a/src/app/(app)/hustles/[id]/financials/financials-board.tsx
+++ b/src/app/(app)/hustles/[id]/financials/financials-board.tsx
@@ -212,8 +212,8 @@ export function FinancialsBoard({
               data={monthly}
               currency={currency}
               series={[
-                { key: "income", label: "Income", color: "#10b981" },
-                { key: "expenses", label: "Expenses", color: "#ef4444" },
+                { key: "income", label: "Income", color: "var(--color-success)" },
+                { key: "expenses", label: "Expenses", color: "var(--color-destructive)" },
               ]}
             />
           </CardContent>
@@ -296,7 +296,7 @@ export function FinancialsBoard({
                   onConfirm={() => handleDelete(t.id)}
                   trigger={
                     <DropdownMenuItem
-                      className="text-rose-300 focus:text-rose-200"
+                      className="text-destructive focus:text-destructive"
                       onSelect={(e) => e.preventDefault()}
                     >
                       <Trash2 className="h-4 w-4" /> Delete
diff --git a/src/app/(app)/hustles/[id]/financials/page.tsx b/src/app/(app)/hustles/[id]/financials/page.tsx
index 2f075b1..240515e 100644
--- a/src/app/(app)/hustles/[id]/financials/page.tsx
+++ b/src/app/(app)/hustles/[id]/financials/page.tsx
@@ -44,7 +44,7 @@ export default async function FinancialsPage({
   );
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 lg:p-8 space-y-6">
       <PageHeader
         title="Financials"
         description="Ledger and analytics for this hustle."
diff --git a/src/app/(app)/hustles/[id]/financials/transaction-form-button.tsx b/src/app/(app)/hustles/[id]/financials/transaction-form-button.tsx
index e3ec03d..916c108 100644
--- a/src/app/(app)/hustles/[id]/financials/transaction-form-button.tsx
+++ b/src/app/(app)/hustles/[id]/financials/transaction-form-button.tsx
@@ -138,12 +138,12 @@ export function TransactionFormButton({ hustleId, transaction, trigger }: Props)
                 <option key={s} value={s} />
               ))}
             </datalist>
-            {errors.category ? <p className="text-xs text-rose-300">{errors.category.message}</p> : null}
+            {errors.category ? <p className="text-xs text-destructive">{errors.category.message}</p> : null}
           </div>
           <div className="space-y-2">
             <Label>Amount</Label>
             <Input type="number" step="0.01" {...register("amount")} />
-            {errors.amount ? <p className="text-xs text-rose-300">{errors.amount.message}</p> : null}
+            {errors.amount ? <p className="text-xs text-destructive">{errors.amount.message}</p> : null}
           </div>
           <div className="space-y-2">
             <Label>Description</Label>
diff --git a/src/app/(app)/hustles/[id]/inventory/inventory-adjust-button.tsx b/src/app/(app)/hustles/[id]/inventory/inventory-adjust-button.tsx
index a0b366b..fe1cb29 100644
--- a/src/app/(app)/hustles/[id]/inventory/inventory-adjust-button.tsx
+++ b/src/app/(app)/hustles/[id]/inventory/inventory-adjust-button.tsx
@@ -68,12 +68,12 @@ export function InventoryAdjustButton({ hustleId, itemId, trigger }: Props) {
           <div className="space-y-2">
             <Label>Delta (use negative for outflow)</Label>
             <Input type="number" step="0.01" {...register("delta")} />
-            {errors.delta ? <p className="text-xs text-rose-300">{errors.delta.message}</p> : null}
+            {errors.delta ? <p className="text-xs text-destructive">{errors.delta.message}</p> : null}
           </div>
           <div className="space-y-2">
             <Label>Reason</Label>
             <Input placeholder="Restock, used in batch, breakage..." {...register("reason")} />
-            {errors.reason ? <p className="text-xs text-rose-300">{errors.reason.message}</p> : null}
+            {errors.reason ? <p className="text-xs text-destructive">{errors.reason.message}</p> : null}
           </div>
           <div className="flex justify-end gap-2">
             <Button type="button" variant="outline" onClick={() => setOpen(false)}>
diff --git a/src/app/(app)/hustles/[id]/inventory/inventory-form-button.tsx b/src/app/(app)/hustles/[id]/inventory/inventory-form-button.tsx
index 28b2013..f9cb867 100644
--- a/src/app/(app)/hustles/[id]/inventory/inventory-form-button.tsx
+++ b/src/app/(app)/hustles/[id]/inventory/inventory-form-button.tsx
@@ -106,7 +106,7 @@ export function InventoryFormButton({ hustleId, item, trigger }: Props) {
           <div className="space-y-2">
             <Label>Name</Label>
             <Input {...register("name")} />
-            {errors.name ? <p className="text-xs text-rose-300">{errors.name.message}</p> : null}
+            {errors.name ? <p className="text-xs text-destructive">{errors.name.message}</p> : null}
           </div>
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-2">
@@ -139,7 +139,7 @@ export function InventoryFormButton({ hustleId, item, trigger }: Props) {
           <div className="space-y-2">
             <Label>URL (optional)</Label>
             <Input type="url" placeholder="https://" {...register("url")} />
-            {errors.url ? <p className="text-xs text-rose-300">{errors.url.message}</p> : null}
+            {errors.url ? <p className="text-xs text-destructive">{errors.url.message}</p> : null}
           </div>
           <div className="flex justify-end gap-2">
             <Button type="button" variant="outline" onClick={() => setOpen(false)}>
diff --git a/src/app/(app)/hustles/[id]/inventory/inventory-import-button.tsx b/src/app/(app)/hustles/[id]/inventory/inventory-import-button.tsx
index 21124f8..8da696f 100644
--- a/src/app/(app)/hustles/[id]/inventory/inventory-import-button.tsx
+++ b/src/app/(app)/hustles/[id]/inventory/inventory-import-button.tsx
@@ -150,9 +150,9 @@ export function InventoryImportButton({ hustleId }: Props) {
               onChange={handleFile}
             />
             {parseError ? (
-              <p className="text-xs text-rose-300">{parseError}</p>
+              <p className="text-xs text-destructive">{parseError}</p>
             ) : parsed ? (
-              <p className="text-xs text-emerald-300">{parsed.length} item{parsed.length === 1 ? "" : "s"} ready to import.</p>
+              <p className="text-xs text-success">{parsed.length} item{parsed.length === 1 ? "" : "s"} ready to import.</p>
             ) : null}
           </div>
 
diff --git a/src/app/(app)/hustles/[id]/inventory/inventory-table.tsx b/src/app/(app)/hustles/[id]/inventory/inventory-table.tsx
index d1006a7..b29f971 100644
--- a/src/app/(app)/hustles/[id]/inventory/inventory-table.tsx
+++ b/src/app/(app)/hustles/[id]/inventory/inventory-table.tsx
@@ -200,7 +200,7 @@ export function InventoryTable({ hustleId, currency, items }: Props) {
                   onConfirm={() => handleDelete(i.id)}
                   trigger={
                     <DropdownMenuItem
-                      className="text-rose-300 focus:text-rose-200"
+                      className="text-destructive focus:text-destructive"
                       onSelect={(e) => e.preventDefault()}
                     >
                       <Trash2 className="h-4 w-4" /> Delete
diff --git a/src/app/(app)/hustles/[id]/inventory/page.tsx b/src/app/(app)/hustles/[id]/inventory/page.tsx
index 8c99f14..ec708f4 100644
--- a/src/app/(app)/hustles/[id]/inventory/page.tsx
+++ b/src/app/(app)/hustles/[id]/inventory/page.tsx
@@ -19,7 +19,7 @@ export default async function InventoryPage({ params }: { params: Promise<{ id:
   ]);
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 lg:p-8 space-y-6">
       <PageHeader
         title="Inventory"
         description="Raw materials, packaging, and stocked items."
diff --git a/src/app/(app)/hustles/[id]/loading.tsx b/src/app/(app)/hustles/[id]/loading.tsx
index d4f4fb8..f48f55c 100644
--- a/src/app/(app)/hustles/[id]/loading.tsx
+++ b/src/app/(app)/hustles/[id]/loading.tsx
@@ -18,7 +18,7 @@ export default function HustleDetailLoading() {
           <Skeleton key={i} className="h-4 w-14" />
         ))}
       </div>
-      <div className="p-6 space-y-6">
+      <div className="p-6 lg:p-8 space-y-6">
         <div className="space-y-2">
           <Skeleton className="h-7 w-28" />
           <Skeleton className="h-4 w-64" />
diff --git a/src/app/(app)/hustles/[id]/orders/[orderId]/order-payment-dialog.tsx b/src/app/(app)/hustles/[id]/orders/[orderId]/order-payment-dialog.tsx
index 4c0bdc6..94f27cd 100644
--- a/src/app/(app)/hustles/[id]/orders/[orderId]/order-payment-dialog.tsx
+++ b/src/app/(app)/hustles/[id]/orders/[orderId]/order-payment-dialog.tsx
@@ -82,7 +82,7 @@ export function OrderPaymentDialog({ hustleId, orderId }: Props) {
             <div className="space-y-2">
               <Label>Amount</Label>
               <Input type="number" step="0.01" {...register("amount")} />
-              {errors.amount ? <p className="text-xs text-rose-300">{errors.amount.message}</p> : null}
+              {errors.amount ? <p className="text-xs text-destructive">{errors.amount.message}</p> : null}
             </div>
             <div className="space-y-2">
               <Label>Method</Label>
diff --git a/src/app/(app)/hustles/[id]/orders/[orderId]/page.tsx b/src/app/(app)/hustles/[id]/orders/[orderId]/page.tsx
index d11c836..e8f9b3f 100644
--- a/src/app/(app)/hustles/[id]/orders/[orderId]/page.tsx
+++ b/src/app/(app)/hustles/[id]/orders/[orderId]/page.tsx
@@ -68,7 +68,7 @@ export default async function OrderDetailPage({
   const outstanding = Math.max(0, toNumber(order.total) - toNumber(order.amountPaid));
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 lg:p-8 space-y-6">
       <PageHeader
         title={`${order.orderNumber}`}
         description={`${order.customerName} • Created ${formatDate(order.createdAt)}`}
diff --git a/src/app/(app)/hustles/[id]/orders/order-form.tsx b/src/app/(app)/hustles/[id]/orders/order-form.tsx
index f45d30c..c8c39df 100644
--- a/src/app/(app)/hustles/[id]/orders/order-form.tsx
+++ b/src/app/(app)/hustles/[id]/orders/order-form.tsx
@@ -150,7 +150,7 @@ export function OrderForm({ hustleId, customers, order, onDone }: Props) {
           <Label>Customer name (display)</Label>
           <Input {...register("customerName")} />
           {errors.customerName ? (
-            <p className="text-xs text-rose-300">{errors.customerName.message}</p>
+            <p className="text-xs text-destructive">{errors.customerName.message}</p>
           ) : null}
         </div>
       </div>
@@ -195,7 +195,7 @@ export function OrderForm({ hustleId, customers, order, onDone }: Props) {
                 type="button"
                 variant="ghost"
                 size="icon"
-                className="text-rose-300"
+                className="text-destructive"
                 onClick={() => itemsArray.remove(i)}
                 disabled={itemsArray.fields.length <= 1}
               >
@@ -204,7 +204,7 @@ export function OrderForm({ hustleId, customers, order, onDone }: Props) {
             </div>
           ))}
         </div>
-        {errors.items ? <p className="text-xs text-rose-300">{errors.items.message}</p> : null}
+        {errors.items ? <p className="text-xs text-destructive">{errors.items.message}</p> : null}
       </div>
 
       <div className="grid grid-cols-3 gap-3">
@@ -294,7 +294,7 @@ export function OrderForm({ hustleId, customers, order, onDone }: Props) {
                 type="button"
                 variant="ghost"
                 size="icon"
-                className="text-rose-300"
+                className="text-destructive"
                 onClick={() => customsArray.remove(i)}
               >
                 <Trash2 className="h-4 w-4" />
diff --git a/src/app/(app)/hustles/[id]/orders/page.tsx b/src/app/(app)/hustles/[id]/orders/page.tsx
index 177b0f2..9cee26c 100644
--- a/src/app/(app)/hustles/[id]/orders/page.tsx
+++ b/src/app/(app)/hustles/[id]/orders/page.tsx
@@ -30,7 +30,7 @@ export default async function OrdersPage({ params }: { params: Promise<{ id: str
   }));
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 lg:p-8 space-y-6">
       <PageHeader
         title="Orders"
         description="Customer orders and their lifecycle."
diff --git a/src/app/(app)/hustles/[id]/page.tsx b/src/app/(app)/hustles/[id]/page.tsx
index d6f1690..e31f7a4 100644
--- a/src/app/(app)/hustles/[id]/page.tsx
+++ b/src/app/(app)/hustles/[id]/page.tsx
@@ -74,7 +74,7 @@ export default async function HustleOverviewPage({
   const recentOrders = ordersData.slice(0, 5);
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 lg:p-8 space-y-6">
       <PageHeader title="Overview" description={`${hustle.name} • This month performance.`} />
 
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
@@ -130,8 +130,8 @@ export default async function HustleOverviewPage({
               data={monthly}
               currency={hustle.currency}
               series={[
-                { key: "income", label: "Income", color: "#10b981" },
-                { key: "expenses", label: "Expenses", color: "#ef4444" },
+                { key: "income", label: "Income", color: "var(--color-success)" },
+                { key: "expenses", label: "Expenses", color: "var(--color-destructive)" },
               ]}
             />
           </CardContent>
@@ -208,7 +208,7 @@ export default async function HustleOverviewPage({
                 {upcomingTasks.map((t) => (
                   <li key={t.id} className="flex items-start gap-2 text-sm">
                     {t.status === "DONE" ? (
-                      <CircleCheckBig className="h-4 w-4 text-emerald-300 mt-0.5" />
+                      <CircleCheckBig className="h-4 w-4 text-success mt-0.5" />
                     ) : (
                       <Calendar className="h-4 w-4 text-muted-foreground mt-0.5" />
                     )}
@@ -229,9 +229,9 @@ export default async function HustleOverviewPage({
       </div>
 
       {lowStock.length > 0 ? (
-        <Card className="border-amber-700/40">
+        <Card className="border-warning/40">
           <CardHeader className="flex flex-row items-center gap-2">
-            <TriangleAlert className="h-4 w-4 text-amber-300" />
+            <TriangleAlert className="h-4 w-4 text-warning" />
             <CardTitle>Low stock alerts</CardTitle>
             <Badge variant="warning">{lowStock.length}</Badge>
           </CardHeader>
@@ -243,7 +243,7 @@ export default async function HustleOverviewPage({
                   className="flex items-center justify-between rounded-md border border-border px-3 py-2 text-sm"
                 >
                   <span className="truncate">{i.name}</span>
-                  <span className="font-mono text-xs text-amber-300">
+                  <span className="font-mono text-xs text-warning">
                     {i.quantity.toString()} {i.unit}
                   </span>
                 </li>
diff --git a/src/app/(app)/hustles/[id]/products/page.tsx b/src/app/(app)/hustles/[id]/products/page.tsx
index 0367a73..f428ed7 100644
--- a/src/app/(app)/hustles/[id]/products/page.tsx
+++ b/src/app/(app)/hustles/[id]/products/page.tsx
@@ -25,7 +25,7 @@ export default async function ProductsPage({ params }: { params: Promise<{ id: s
   }));
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 lg:p-8 space-y-6">
       <PageHeader
         title="Products"
         description="Manage your product designs, track R&D progress, and build inspiration boards."
diff --git a/src/app/(app)/hustles/[id]/products/product-detail-sheet.tsx b/src/app/(app)/hustles/[id]/products/product-detail-sheet.tsx
index e249b98..618c177 100644
--- a/src/app/(app)/hustles/[id]/products/product-detail-sheet.tsx
+++ b/src/app/(app)/hustles/[id]/products/product-detail-sheet.tsx
@@ -124,7 +124,7 @@ function AddInspirationDialog({
             </div>
           )}
           {previewError && (
-            <p className="text-xs text-amber-400">Image couldn&apos;t be previewed - some sites block embedding. It may still display when saved.</p>
+            <p className="text-xs text-warning">Image couldn&apos;t be previewed - some sites block embedding. It may still display when saved.</p>
           )}
           <div className="space-y-2">
             <Label>Title (optional)</Label>
diff --git a/src/app/(app)/hustles/[id]/research/page.tsx b/src/app/(app)/hustles/[id]/research/page.tsx
index 253c586..3ae281b 100644
--- a/src/app/(app)/hustles/[id]/research/page.tsx
+++ b/src/app/(app)/hustles/[id]/research/page.tsx
@@ -20,7 +20,7 @@ export default async function ResearchPage({ params }: { params: Promise<{ id: s
   }));
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 lg:p-8 space-y-6">
       <PageHeader title="Research notes" description="A private notebook for everything you learn about this hustle." />
       <ResearchBoard hustleId={id} notes={serialized} />
     </div>
diff --git a/src/app/(app)/hustles/[id]/research/research-board.tsx b/src/app/(app)/hustles/[id]/research/research-board.tsx
index 98727a0..a3f1929 100644
--- a/src/app/(app)/hustles/[id]/research/research-board.tsx
+++ b/src/app/(app)/hustles/[id]/research/research-board.tsx
@@ -186,7 +186,7 @@ export function ResearchBoard({ hustleId, notes }: Props) {
                         <Button
                           variant="ghost"
                           size="icon"
-                          className="h-7 w-7 text-rose-300 hover:text-rose-200"
+                          className="h-7 w-7 text-destructive hover:text-destructive"
                           onClick={(e) => e.stopPropagation()}
                         >
                           <Trash2 className="h-3.5 w-3.5" />
diff --git a/src/app/(app)/hustles/[id]/research/research-sheet.tsx b/src/app/(app)/hustles/[id]/research/research-sheet.tsx
index 69d0be2..5499f5e 100644
--- a/src/app/(app)/hustles/[id]/research/research-sheet.tsx
+++ b/src/app/(app)/hustles/[id]/research/research-sheet.tsx
@@ -122,7 +122,7 @@ export function ResearchSheet({ open, onOpenChange, hustleId, note }: Props) {
           <div className="space-y-2">
             <Label htmlFor="title">Title</Label>
             <Input id="title" {...register("title")} />
-            {errors.title ? <p className="text-xs text-rose-300">{errors.title.message}</p> : null}
+            {errors.title ? <p className="text-xs text-destructive">{errors.title.message}</p> : null}
           </div>
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-2">
@@ -153,7 +153,7 @@ export function ResearchSheet({ open, onOpenChange, hustleId, note }: Props) {
           <div className="space-y-2">
             <Label htmlFor="content">Content</Label>
             <Textarea id="content" rows={12} {...register("content")} />
-            {errors.content ? <p className="text-xs text-rose-300">{errors.content.message}</p> : null}
+            {errors.content ? <p className="text-xs text-destructive">{errors.content.message}</p> : null}
           </div>
           <div className="space-y-2">
             <Label>Tags</Label>
@@ -181,7 +181,7 @@ export function ResearchSheet({ open, onOpenChange, hustleId, note }: Props) {
                     <button
                       type="button"
                       onClick={() => removeTag(t)}
-                      className="hover:text-rose-300"
+                      className="hover:text-destructive"
                     >
                       <X className="h-3 w-3" />
                     </button>
diff --git a/src/app/(app)/hustles/[id]/settings/danger-zone.tsx b/src/app/(app)/hustles/[id]/settings/danger-zone.tsx
index ff733e9..e818e10 100644
--- a/src/app/(app)/hustles/[id]/settings/danger-zone.tsx
+++ b/src/app/(app)/hustles/[id]/settings/danger-zone.tsx
@@ -42,9 +42,9 @@ export function DangerZone({ hustleId, hustleName }: Props) {
   }
 
   return (
-    <Card className="border-rose-700/40">
+    <Card className="border-destructive/40">
       <CardHeader className="flex flex-row items-center gap-2">
-        <TriangleAlert className="h-4 w-4 text-rose-300" />
+        <TriangleAlert className="h-4 w-4 text-destructive" />
         <CardTitle>Danger zone</CardTitle>
       </CardHeader>
       <CardContent className="space-y-3">
diff --git a/src/app/(app)/hustles/[id]/settings/page.tsx b/src/app/(app)/hustles/[id]/settings/page.tsx
index 15ad209..554f567 100644
--- a/src/app/(app)/hustles/[id]/settings/page.tsx
+++ b/src/app/(app)/hustles/[id]/settings/page.tsx
@@ -11,7 +11,7 @@ export default async function HustleSettingsPage({ params }: { params: Promise<{
   if (!hustle) return null;
 
   return (
-    <div className="p-6 space-y-6 max-w-3xl">
+    <div className="p-6 lg:p-8 space-y-6 max-w-3xl">
       <PageHeader title="Settings" description="Configure this hustle." />
 
       <Card>
diff --git a/src/app/(app)/hustles/[id]/suppliers/[supplierId]/page.tsx b/src/app/(app)/hustles/[id]/suppliers/[supplierId]/page.tsx
index fb0875b..31f2647 100644
--- a/src/app/(app)/hustles/[id]/suppliers/[supplierId]/page.tsx
+++ b/src/app/(app)/hustles/[id]/suppliers/[supplierId]/page.tsx
@@ -32,7 +32,7 @@ export default async function SupplierDetailPage({
   if (!supplier || supplier.hustleId !== id) notFound();
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 lg:p-8 space-y-6">
       <PageHeader
         title={supplier.name}
         breadcrumbs={[
diff --git a/src/app/(app)/hustles/[id]/suppliers/page.tsx b/src/app/(app)/hustles/[id]/suppliers/page.tsx
index 731f9ac..77e2931 100644
--- a/src/app/(app)/hustles/[id]/suppliers/page.tsx
+++ b/src/app/(app)/hustles/[id]/suppliers/page.tsx
@@ -12,7 +12,7 @@ export default async function SuppliersPage({ params }: { params: Promise<{ id:
   const suppliers = await supplierService.list(id);
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 lg:p-8 space-y-6">
       <PageHeader
         title="Suppliers"
         description="Vendors, manufacturers, and providers you work with."
diff --git a/src/app/(app)/hustles/[id]/suppliers/supplier-form.tsx b/src/app/(app)/hustles/[id]/suppliers/supplier-form.tsx
index 63e7001..89efa18 100644
--- a/src/app/(app)/hustles/[id]/suppliers/supplier-form.tsx
+++ b/src/app/(app)/hustles/[id]/suppliers/supplier-form.tsx
@@ -93,7 +93,7 @@ export function SupplierForm({ hustleId, supplier, onDone }: Props) {
         <div className="space-y-2">
           <Label>Name</Label>
           <Input {...register("name")} />
-          {errors.name ? <p className="text-xs text-rose-300">{errors.name.message}</p> : null}
+          {errors.name ? <p className="text-xs text-destructive">{errors.name.message}</p> : null}
         </div>
         <div className="space-y-2">
           <Label>Contact name</Label>
@@ -108,14 +108,14 @@ export function SupplierForm({ hustleId, supplier, onDone }: Props) {
         <div className="space-y-2">
           <Label>Email</Label>
           <Input type="email" {...register("email")} />
-          {errors.email ? <p className="text-xs text-rose-300">{errors.email.message}</p> : null}
+          {errors.email ? <p className="text-xs text-destructive">{errors.email.message}</p> : null}
         </div>
       </div>
       <div className="grid grid-cols-2 gap-3">
         <div className="space-y-2">
           <Label>Website</Label>
           <Input {...register("website")} />
-          {errors.website ? <p className="text-xs text-rose-300">{errors.website.message}</p> : null}
+          {errors.website ? <p className="text-xs text-destructive">{errors.website.message}</p> : null}
         </div>
         <div className="space-y-2">
           <Label>City</Label>
diff --git a/src/app/(app)/hustles/[id]/suppliers/suppliers-table.tsx b/src/app/(app)/hustles/[id]/suppliers/suppliers-table.tsx
index 953003f..197e819 100644
--- a/src/app/(app)/hustles/[id]/suppliers/suppliers-table.tsx
+++ b/src/app/(app)/hustles/[id]/suppliers/suppliers-table.tsx
@@ -102,7 +102,7 @@ export function SuppliersTable({ hustleId, suppliers }: Props) {
               onConfirm={() => handleDelete(s.id)}
               trigger={
                 <DropdownMenuItem
-                  className="text-rose-300 focus:text-rose-200"
+                  className="text-destructive focus:text-destructive"
                   onSelect={(e) => e.preventDefault()}
                 >
                   <Trash2 className="h-4 w-4" /> Delete
diff --git a/src/app/(app)/hustles/[id]/tasks/page.tsx b/src/app/(app)/hustles/[id]/tasks/page.tsx
index e0546e7..b8f7ecb 100644
--- a/src/app/(app)/hustles/[id]/tasks/page.tsx
+++ b/src/app/(app)/hustles/[id]/tasks/page.tsx
@@ -11,7 +11,7 @@ export default async function TasksPage({ params }: { params: Promise<{ id: stri
   const tasks = await taskService.list(id);
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 lg:p-8 space-y-6">
       <PageHeader
         title="Tasks"
         description="Things to do, ordered by priority and due date."
diff --git a/src/app/(app)/hustles/[id]/tasks/task-form-button.tsx b/src/app/(app)/hustles/[id]/tasks/task-form-button.tsx
index 9172999..58cab8b 100644
--- a/src/app/(app)/hustles/[id]/tasks/task-form-button.tsx
+++ b/src/app/(app)/hustles/[id]/tasks/task-form-button.tsx
@@ -107,7 +107,7 @@ export function TaskFormButton({ hustleId, task, trigger }: Props) {
           <div className="space-y-2">
             <Label>Title</Label>
             <Input {...register("title")} />
-            {errors.title ? <p className="text-xs text-rose-300">{errors.title.message}</p> : null}
+            {errors.title ? <p className="text-xs text-destructive">{errors.title.message}</p> : null}
           </div>
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-2">
diff --git a/src/app/(app)/hustles/[id]/tasks/tasks-board.tsx b/src/app/(app)/hustles/[id]/tasks/tasks-board.tsx
index a617e1c..98c4d34 100644
--- a/src/app/(app)/hustles/[id]/tasks/tasks-board.tsx
+++ b/src/app/(app)/hustles/[id]/tasks/tasks-board.tsx
@@ -169,11 +169,11 @@ export function TasksBoard({ hustleId, tasks }: Props) {
                   className={cn(
                     "mt-0.5 h-5 w-5 rounded-md border flex items-center justify-center",
                     t.status === "DONE"
-                      ? "bg-emerald-500/20 border-emerald-700/50"
+                      ? "bg-success/15 border-success/40"
                       : "border-border hover:border-primary",
                   )}
                 >
-                  {t.status === "DONE" ? <Check className="h-3 w-3 text-emerald-300" /> : null}
+                  {t.status === "DONE" ? <Check className="h-3 w-3 text-success" /> : null}
                 </button>
                 <div className="flex-1 min-w-0">
                   <p className={cn("font-medium", t.status === "DONE" && "line-through text-muted-foreground")}>
@@ -190,7 +190,7 @@ export function TasksBoard({ hustleId, tasks }: Props) {
                       <span
                         className={cn(
                           "inline-flex items-center gap-1",
-                          isOverdue(t) ? "text-rose-300" : "",
+                          isOverdue(t) ? "text-destructive" : "",
                         )}
                       >
                         <Clock className="h-3 w-3" />
@@ -238,7 +238,7 @@ export function TasksBoard({ hustleId, tasks }: Props) {
                         <div className="flex items-center justify-between gap-2 text-[10px] text-muted-foreground">
                           <TaskPriorityBadge priority={t.priority} />
                           {t.dueDate ? (
-                            <span className={isOverdue(t) ? "text-rose-300" : ""}>
+                            <span className={isOverdue(t) ? "text-destructive" : ""}>
                               {formatDate(t.dueDate)}
                             </span>
                           ) : null}
@@ -301,7 +301,7 @@ function RowMenu({
           onConfirm={onDelete}
           trigger={
             <DropdownMenuItem
-              className="text-rose-300 focus:text-rose-200"
+              className="text-destructive focus:text-destructive"
               onSelect={(e) => e.preventDefault()}
             >
               <Trash2 className="h-4 w-4" /> Delete
diff --git a/src/app/(app)/hustles/hustle-form.tsx b/src/app/(app)/hustles/hustle-form.tsx
index 67ccbbc..0a77014 100644
--- a/src/app/(app)/hustles/hustle-form.tsx
+++ b/src/app/(app)/hustles/hustle-form.tsx
@@ -64,7 +64,7 @@ export function HustleForm({ hustle, onDone }: Props) {
     resolver: zodResolver(hustleSchema),
     defaultValues: {
       name: hustle?.name ?? "",
-      color: hustle?.color ?? "#6366f1",
+      color: hustle?.color ?? "#14b8a6",
       description: hustle?.description ?? "",
       currency: (hustle?.currency as HustleInput["currency"]) ?? "PKR",
       status: (hustle?.status as HustleInput["status"]) ?? "IDEA",
@@ -108,7 +108,7 @@ export function HustleForm({ hustle, onDone }: Props) {
       <div className="space-y-2">
         <Label htmlFor="name">Name</Label>
         <Input id="name" {...register("name")} />
-        {errors.name ? <p className="text-xs text-rose-300">{errors.name.message}</p> : null}
+        {errors.name ? <p className="text-xs text-destructive">{errors.name.message}</p> : null}
       </div>
       <div className="space-y-2">
         <Label htmlFor="description">Description</Label>
@@ -118,7 +118,7 @@ export function HustleForm({ hustle, onDone }: Props) {
         <Label htmlFor="websiteUrl">Website URL</Label>
         <Input id="websiteUrl" placeholder="https://daastan.pk" {...register("websiteUrl")} />
         {errors.websiteUrl ? (
-          <p className="text-xs text-rose-300">{errors.websiteUrl.message}</p>
+          <p className="text-xs text-destructive">{errors.websiteUrl.message}</p>
         ) : null}
         <p className="text-xs text-muted-foreground">Shown on the order tracking page as a &quot;Back to site&quot; link.</p>
       </div>
@@ -140,7 +140,7 @@ export function HustleForm({ hustle, onDone }: Props) {
             />
           ))}
         </div>
-        {errors.color ? <p className="text-xs text-rose-300">{errors.color.message}</p> : null}
+        {errors.color ? <p className="text-xs text-destructive">{errors.color.message}</p> : null}
       </div>
       <div className="grid grid-cols-2 gap-3">
         <div className="space-y-2">
diff --git a/src/app/(app)/hustles/loading.tsx b/src/app/(app)/hustles/loading.tsx
index ff6a47c..8353543 100644
--- a/src/app/(app)/hustles/loading.tsx
+++ b/src/app/(app)/hustles/loading.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 
 export default function HustlesLoading() {
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 lg:p-8 space-y-6">
       <div className="space-y-2">
         <Skeleton className="h-7 w-24" />
         <Skeleton className="h-4 w-52" />
diff --git a/src/app/(app)/hustles/page.tsx b/src/app/(app)/hustles/page.tsx
index 3056d15..78c5c16 100644
--- a/src/app/(app)/hustles/page.tsx
+++ b/src/app/(app)/hustles/page.tsx
@@ -16,7 +16,7 @@ export default async function HustlesPage({
   const hustles = await hustleService.list();
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 lg:p-8 space-y-6">
       <PageHeader
         title="Hustles"
         description="All businesses you operate."
diff --git a/src/app/(app)/loading.tsx b/src/app/(app)/loading.tsx
index 0c69028..214e0a8 100644
--- a/src/app/(app)/loading.tsx
+++ b/src/app/(app)/loading.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 
 export default function DashboardLoading() {
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 lg:p-8 space-y-6">
       <div className="space-y-2">
         <Skeleton className="h-7 w-52" />
         <Skeleton className="h-4 w-80" />
diff --git a/src/app/(app)/page.tsx b/src/app/(app)/page.tsx
index a274d1a..5580ab7 100644
--- a/src/app/(app)/page.tsx
+++ b/src/app/(app)/page.tsx
@@ -38,7 +38,7 @@ export default async function DashboardPage() {
   }));
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 lg:p-8 space-y-6">
       <PageHeader
         title="Operator dashboard"
         description="Cross-hustle financial and operational overview for the current month."
diff --git a/src/app/(auth)/login/login-form.tsx b/src/app/(auth)/login/login-form.tsx
index fbae2de..34a5c33 100644
--- a/src/app/(auth)/login/login-form.tsx
+++ b/src/app/(auth)/login/login-form.tsx
@@ -43,7 +43,7 @@ export function LoginForm() {
           <div className="space-y-2">
             <Label htmlFor="email">Email</Label>
             <Input id="email" type="email" autoComplete="email" {...register("email")} />
-            {errors.email ? <p className="text-xs text-rose-300">{errors.email.message}</p> : null}
+            {errors.email ? <p className="text-xs text-destructive">{errors.email.message}</p> : null}
           </div>
           <div className="space-y-2">
             <Label htmlFor="password">Password</Label>
@@ -54,7 +54,7 @@ export function LoginForm() {
               {...register("password")}
             />
             {errors.password ? (
-              <p className="text-xs text-rose-300">{errors.password.message}</p>
+              <p className="text-xs text-destructive">{errors.password.message}</p>
             ) : null}
           </div>
           <Button type="submit" className="w-full" disabled={pending}>
diff --git a/src/app/(auth)/setup/setup-form.tsx b/src/app/(auth)/setup/setup-form.tsx
index 4bb71d4..6fc2500 100644
--- a/src/app/(auth)/setup/setup-form.tsx
+++ b/src/app/(auth)/setup/setup-form.tsx
@@ -49,25 +49,25 @@ export function SetupForm() {
           <div className="space-y-2">
             <Label htmlFor="name">Name</Label>
             <Input id="name" {...register("name")} />
-            {errors.name ? <p className="text-xs text-rose-300">{errors.name.message}</p> : null}
+            {errors.name ? <p className="text-xs text-destructive">{errors.name.message}</p> : null}
           </div>
           <div className="space-y-2">
             <Label htmlFor="email">Email</Label>
             <Input id="email" type="email" {...register("email")} />
-            {errors.email ? <p className="text-xs text-rose-300">{errors.email.message}</p> : null}
+            {errors.email ? <p className="text-xs text-destructive">{errors.email.message}</p> : null}
           </div>
           <div className="space-y-2">
             <Label htmlFor="password">Password</Label>
             <Input id="password" type="password" {...register("password")} />
             {errors.password ? (
-              <p className="text-xs text-rose-300">{errors.password.message}</p>
+              <p className="text-xs text-destructive">{errors.password.message}</p>
             ) : null}
           </div>
           <div className="space-y-2">
             <Label htmlFor="confirmPassword">Confirm password</Label>
             <Input id="confirmPassword" type="password" {...register("confirmPassword")} />
             {errors.confirmPassword ? (
-              <p className="text-xs text-rose-300">{errors.confirmPassword.message}</p>
+              <p className="text-xs text-destructive">{errors.confirmPassword.message}</p>
             ) : null}
           </div>
           <Button type="submit" className="w-full" disabled={pending}>
diff --git a/src/app/globals.css b/src/app/globals.css
index 3e80a9d..151fa6f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -6,49 +6,106 @@
   --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
   --font-mono: var(--font-geist-mono), ui-monospace, monospace;
 
-  --color-background: #13131a;
-  --color-foreground: #eeeef2;
+  /* Light theme (default) */
+  --color-background: #fafafa;
+  --color-foreground: #18181b;
 
-  --color-card: #1c1c28;
-  --color-card-foreground: #eeeef2;
+  --color-card: #ffffff;
+  --color-card-foreground: #18181b;
 
-  --color-popover: #1f1f2e;
-  --color-popover-foreground: #eeeef2;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #18181b;
 
-  --color-primary: #6366f1;
+  --color-primary: #0f766e;
   --color-primary-foreground: #ffffff;
 
-  --color-secondary: #24243a;
-  --color-secondary-foreground: #eeeef2;
+  --color-secondary: #f4f4f5;
+  --color-secondary-foreground: #18181b;
 
-  --color-muted: #22223a;
-  --color-muted-foreground: #8888aa;
+  --color-muted: #f4f4f5;
+  --color-muted-foreground: #71717a;
 
-  --color-accent: #26263c;
-  --color-accent-foreground: #eeeef2;
+  --color-accent: #f0fdfa;
+  --color-accent-foreground: #0f766e;
 
-  --color-destructive: #ef4444;
-  --color-destructive-foreground: #fafafa;
+  --color-destructive: #dc2626;
+  --color-destructive-foreground: #fef2f2;
+
+  --color-success: #15803d;
+  --color-success-foreground: #f0fdf4;
+
+  --color-warning: #b45309;
+  --color-warning-foreground: #fffbeb;
 
-  --color-border: #2e2e40;
-  --color-input: #2e2e40;
-  --color-ring: #6366f1;
+  --color-info: #0369a1;
+  --color-info-foreground: #f0f9ff;
 
-  --color-chart-1: #6366f1;
-  --color-chart-2: #38bdf8;
+  --color-border: #e4e4e7;
+  --color-input: #e4e4e7;
+  --color-ring: #0f766e;
+
+  --color-chart-1: #14b8a6;
+  --color-chart-2: #3b82f6;
   --color-chart-3: #a78bfa;
-  --color-chart-4: #f97316;
-  --color-chart-5: #10b981;
-  --color-chart-6: #ec4899;
+  --color-chart-4: #fb7185;
+  --color-chart-5: #f59e0b;
+  --color-chart-6: #84cc16;
 
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
+  --radius-lg: 0.625rem;
+  --radius-xl: 0.875rem;
+}
+
+.dark {
+  --color-background: #0a0a0d;
+  --color-foreground: #f4f4f5;
+
+  --color-card: #131318;
+  --color-card-foreground: #f4f4f5;
+
+  --color-popover: #17171d;
+  --color-popover-foreground: #f4f4f5;
+
+  --color-primary: #14b8a6;
+  --color-primary-foreground: #062e2b;
+
+  --color-secondary: #1c1c22;
+  --color-secondary-foreground: #f4f4f5;
+
+  --color-muted: #1a1a20;
+  --color-muted-foreground: #9a9aa5;
+
+  --color-accent: #122b28;
+  --color-accent-foreground: #5eead4;
+
+  --color-destructive: #ef4444;
+  --color-destructive-foreground: #fef2f2;
+
+  --color-success: #34d399;
+  --color-success-foreground: #052e21;
+
+  --color-warning: #fbbf24;
+  --color-warning-foreground: #451a03;
+
+  --color-info: #38bdf8;
+  --color-info-foreground: #082f49;
+
+  --color-border: #26262e;
+  --color-input: #26262e;
+  --color-ring: #14b8a6;
 }
 
 :root {
+  color-scheme: light;
+  --scrollbar-thumb: #d4d4d8;
+  --scrollbar-thumb-hover: #a1a1aa;
+}
+
+.dark {
   color-scheme: dark;
+  --scrollbar-thumb: #2c2c36;
+  --scrollbar-thumb-hover: #3a3a46;
 }
 
 html,
@@ -71,7 +128,7 @@ body {
 }
 
 ::selection {
-  background: rgba(99, 102, 241, 0.35);
+  background: rgba(20, 184, 166, 0.3);
 }
 
 ::-webkit-scrollbar {
@@ -82,11 +139,11 @@ body {
   background: transparent;
 }
 ::-webkit-scrollbar-thumb {
-  background: #32324a;
+  background: var(--scrollbar-thumb);
   border-radius: 6px;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: #42425a;
+  background: var(--scrollbar-thumb-hover);
 }
 
 @layer utilities {
@@ -97,7 +154,7 @@ body {
   }
 
   .surface-elevated {
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
     border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
   }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b793906..4f8e48c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata, Viewport } from "next";
 import { GeistSans } from "geist/font/sans";
 import { GeistMono } from "geist/font/mono";
+import { ThemeProvider } from "next-themes";
 import { Toaster } from "@/components/ui/sonner";
 import { Analytics } from "@vercel/analytics/next";
 import "./globals.css";
@@ -16,7 +17,7 @@ export const metadata: Metadata = {
 };
 
 export const viewport: Viewport = {
-  themeColor: "#6366f1",
+  themeColor: "#0a0a0d",
   width: "device-width",
   initialScale: 1,
   maximumScale: 1,
@@ -24,10 +25,12 @@ export const viewport: Viewport = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className={`dark ${GeistSans.variable} ${GeistMono.variable}`}>
+    <html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`} suppressHydrationWarning>
       <body className="min-h-screen bg-background text-foreground antialiased">
-        {children}
-        <Toaster richColors position="top-right" theme="dark" />
+        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
+          {children}
+          <Toaster richColors position="top-right" />
+        </ThemeProvider>
         <Analytics />
       </body>
     </html>
diff --git a/src/app/track/[orderId]/page.tsx b/src/app/track/[orderId]/page.tsx
index 78ce06e..6665e6b 100644
--- a/src/app/track/[orderId]/page.tsx
+++ b/src/app/track/[orderId]/page.tsx
@@ -27,7 +27,7 @@ export default async function TrackOrderPage({ params }: { params: Promise<{ ord
   if (!order) notFound();
 
   const hustle = await hustleRepository.findById(order.hustleId);
-  const brandColor = hustle?.color ?? "#6366f1";
+  const brandColor = hustle?.color ?? "#14b8a6";
   const brandName = hustle?.name ?? "HustleOS";
   const websiteUrl = hustle?.websiteUrl ?? null;
   const brandInitial = brandName.charAt(0).toUpperCase();
diff --git a/src/components/charts/donut-chart.tsx b/src/components/charts/donut-chart.tsx
index 28092a3..3c7d0af 100644
--- a/src/components/charts/donut-chart.tsx
+++ b/src/components/charts/donut-chart.tsx
@@ -2,8 +2,9 @@
 
 import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
 import { formatCurrencyValue } from "@/lib/currency";
+import { SERIES_PALETTE } from "./palette";
 
-const PALETTE = ["#c8a560", "#38bdf8", "#a78bfa", "#f97316", "#10b981", "#ec4899", "#f43f5e", "#22d3ee"];
+const PALETTE = SERIES_PALETTE;
 
 interface Props {
   data: Array<{ name: string; value: number }>;
@@ -30,7 +31,15 @@ export function DonutChartCard({ data, currency = "PKR", height = 260 }: Props)
             ))}
           </Pie>
           <Tooltip
-            contentStyle={{ background: "#111113", border: "1px solid #27272a", borderRadius: 6, fontSize: 12 }}
+            contentStyle={{
+              background: "var(--color-popover)",
+              border: "1px solid var(--color-border)",
+              borderRadius: 6,
+              fontSize: 12,
+              color: "var(--color-popover-foreground)",
+            }}
+            itemStyle={{ color: "var(--color-popover-foreground)" }}
+            labelStyle={{ color: "var(--color-popover-foreground)" }}
             formatter={(value) => typeof value === 'number' ? formatCurrencyValue(value, currency) : String(value ?? '')}
           />
         </PieChart>
diff --git a/src/components/charts/grouped-bar-chart.tsx b/src/components/charts/grouped-bar-chart.tsx
index 63c2e57..694cef6 100644
--- a/src/components/charts/grouped-bar-chart.tsx
+++ b/src/components/charts/grouped-bar-chart.tsx
@@ -31,17 +31,25 @@ export function GroupedBarChart({ data, series, currency = "PKR", xKey = "label"
     <div style={{ height }}>
       <ResponsiveContainer width="100%" height="100%">
         <BarChart data={data}>
-          <CartesianGrid stroke="#27272a" strokeDasharray="3 3" vertical={false} />
-          <XAxis dataKey={xKey} stroke="#71717a" fontSize={11} tickLine={false} axisLine={false} />
+          <CartesianGrid stroke="var(--color-border)" strokeDasharray="3 3" vertical={false} />
+          <XAxis dataKey={xKey} stroke="var(--color-muted-foreground)" fontSize={11} tickLine={false} axisLine={false} />
           <YAxis
-            stroke="#71717a"
+            stroke="var(--color-muted-foreground)"
             fontSize={11}
             tickLine={false}
             axisLine={false}
             tickFormatter={(v) => formatCurrencyValue(v, currency, { compact: true })}
           />
           <Tooltip
-            contentStyle={{ background: "#111113", border: "1px solid #27272a", borderRadius: 6, fontSize: 12 }}
+            contentStyle={{
+              background: "var(--color-popover)",
+              border: "1px solid var(--color-border)",
+              borderRadius: 6,
+              fontSize: 12,
+              color: "var(--color-popover-foreground)",
+            }}
+            itemStyle={{ color: "var(--color-popover-foreground)" }}
+            labelStyle={{ color: "var(--color-popover-foreground)" }}
             formatter={(value) => typeof value === 'number' ? formatCurrencyValue(value, currency) : String(value ?? '')}
           />
           <Legend wrapperStyle={{ fontSize: 11 }} />
diff --git a/src/components/charts/line-chart.tsx b/src/components/charts/line-chart.tsx
index f1b3bd4..d875070 100644
--- a/src/components/charts/line-chart.tsx
+++ b/src/components/charts/line-chart.tsx
@@ -31,17 +31,25 @@ export function MultiLineChart({ data, series, currency = "PKR", xKey = "label",
     <div style={{ height }}>
       <ResponsiveContainer width="100%" height="100%">
         <LineChart data={data}>
-          <CartesianGrid stroke="#27272a" strokeDasharray="3 3" vertical={false} />
-          <XAxis dataKey={xKey} stroke="#71717a" fontSize={11} tickLine={false} axisLine={false} />
+          <CartesianGrid stroke="var(--color-border)" strokeDasharray="3 3" vertical={false} />
+          <XAxis dataKey={xKey} stroke="var(--color-muted-foreground)" fontSize={11} tickLine={false} axisLine={false} />
           <YAxis
-            stroke="#71717a"
+            stroke="var(--color-muted-foreground)"
             fontSize={11}
             tickLine={false}
             axisLine={false}
             tickFormatter={(v) => formatCurrencyValue(v, currency, { compact: true })}
           />
           <Tooltip
-            contentStyle={{ background: "#111113", border: "1px solid #27272a", borderRadius: 6, fontSize: 12 }}
+            contentStyle={{
+              background: "var(--color-popover)",
+              border: "1px solid var(--color-border)",
+              borderRadius: 6,
+              fontSize: 12,
+              color: "var(--color-popover-foreground)",
+            }}
+            itemStyle={{ color: "var(--color-popover-foreground)" }}
+            labelStyle={{ color: "var(--color-popover-foreground)" }}
             formatter={(value) => typeof value === 'number' ? formatCurrencyValue(value, currency) : String(value ?? '')}
           />
           <Legend wrapperStyle={{ fontSize: 11 }} />
diff --git a/src/components/charts/palette.ts b/src/components/charts/palette.ts
index b1e22fb..5dfa12c 100644
--- a/src/components/charts/palette.ts
+++ b/src/components/charts/palette.ts
@@ -1,14 +1,12 @@
 export const SERIES_PALETTE = [
-  "#c8a560",
-  "#38bdf8",
+  "#14b8a6",
+  "#3b82f6",
   "#a78bfa",
-  "#f97316",
-  "#10b981",
-  "#ec4899",
-  "#f43f5e",
-  "#22d3ee",
+  "#fb7185",
+  "#f59e0b",
   "#84cc16",
-  "#facc15",
+  "#38bdf8",
+  "#e879f9",
 ];
 
 export function colorAt(i: number): string {
diff --git a/src/components/charts/stacked-bar-chart.tsx b/src/components/charts/stacked-bar-chart.tsx
index 1d93bd6..512e9e8 100644
--- a/src/components/charts/stacked-bar-chart.tsx
+++ b/src/components/charts/stacked-bar-chart.tsx
@@ -37,10 +37,10 @@ export function StackedBarChartCard({
     <div style={{ height }}>
       <ResponsiveContainer width="100%" height="100%">
         <BarChart data={data}>
-          <CartesianGrid stroke="#27272a" strokeDasharray="3 3" vertical={false} />
-          <XAxis dataKey={xKey} stroke="#71717a" fontSize={11} tickLine={false} axisLine={false} />
+          <CartesianGrid stroke="var(--color-border)" strokeDasharray="3 3" vertical={false} />
+          <XAxis dataKey={xKey} stroke="var(--color-muted-foreground)" fontSize={11} tickLine={false} axisLine={false} />
           <YAxis
-            stroke="#71717a"
+            stroke="var(--color-muted-foreground)"
             fontSize={11}
             tickLine={false}
             axisLine={false}
@@ -48,11 +48,14 @@ export function StackedBarChartCard({
           />
           <Tooltip
             contentStyle={{
-              background: "#111113",
-              border: "1px solid #27272a",
+              background: "var(--color-popover)",
+              border: "1px solid var(--color-border)",
               borderRadius: 6,
               fontSize: 12,
+              color: "var(--color-popover-foreground)",
             }}
+            itemStyle={{ color: "var(--color-popover-foreground)" }}
+            labelStyle={{ color: "var(--color-popover-foreground)" }}
             formatter={(value) => typeof value === 'number' ? formatCurrencyValue(value, currency) : String(value ?? '')}
           />
           <Legend wrapperStyle={{ fontSize: 11 }} />
diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index d06c9c3..b47f139 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -17,6 +17,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 import { useUiStore } from "@/stores/ui-store";
 import { cn } from "@/lib/utils";
 import { logoutAction } from "@/actions/auth-actions";
+import { ThemeToggle } from "@/components/shared/theme-toggle";
 
 const NAV = [
   { href: "/", label: "Dashboard", icon: LayoutDashboard },
@@ -49,7 +50,7 @@ export function Sidebar({ user }: SidebarProps) {
     <aside
       className={cn(
         "sticky top-0 z-40 h-screen shrink-0 border-r border-border bg-card/80 backdrop-blur transition-[width] hidden md:flex md:flex-col",
-        collapsed ? "w-[64px]" : "w-[224px]",
+        collapsed ? "w-[64px]" : "w-[256px]",
       )}
     >
       {/* Brand header */}
@@ -119,6 +120,7 @@ export function Sidebar({ user }: SidebarProps) {
                   ) : null}
                 </TooltipContent>
               </Tooltip>
+              <ThemeToggle />
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
@@ -145,6 +147,7 @@ export function Sidebar({ user }: SidebarProps) {
                   <p className="text-[11px] text-muted-foreground truncate leading-tight">{user.email}</p>
                 ) : null}
               </div>
+              <ThemeToggle />
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
diff --git a/src/components/layout/topbar.tsx b/src/components/layout/topbar.tsx
index e0b2f70..de2ab56 100644
--- a/src/components/layout/topbar.tsx
+++ b/src/components/layout/topbar.tsx
@@ -1,9 +1,11 @@
 import type { ReactNode } from "react";
+import { ThemeToggle } from "@/components/shared/theme-toggle";
 
 export function Topbar({ children }: { children?: ReactNode }) {
   return (
     <div className="sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-border bg-background/70 px-6 backdrop-blur">
-      {children}
+      <div className="flex-1 min-w-0 flex items-center gap-3">{children}</div>
+      <ThemeToggle />
     </div>
   );
 }
diff --git a/src/components/shared/currency.tsx b/src/components/shared/currency.tsx
index 222bfca..2d60355 100644
--- a/src/components/shared/currency.tsx
+++ b/src/components/shared/currency.tsx
@@ -22,16 +22,16 @@ export function Currency({
   const num = toNumber(value);
   const toneClass =
     tone === "positive"
-      ? "text-emerald-300"
+      ? "text-success"
       : tone === "negative"
-      ? "text-rose-300"
+      ? "text-destructive"
       : tone === "muted"
       ? "text-muted-foreground"
       : tone === "auto"
       ? num > 0
-        ? "text-emerald-300"
+        ? "text-success"
         : num < 0
-        ? "text-rose-300"
+        ? "text-destructive"
         : "text-foreground"
       : "text-foreground";
 
diff --git a/src/components/shared/data-table.tsx b/src/components/shared/data-table.tsx
index 19e3369..ce6d9c9 100644
--- a/src/components/shared/data-table.tsx
+++ b/src/components/shared/data-table.tsx
@@ -5,13 +5,23 @@ import {
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
+  getPaginationRowModel,
   getSortedRowModel,
   useReactTable,
   type ColumnDef,
   type SortingState,
   type VisibilityState,
 } from "@tanstack/react-table";
-import { Search, SlidersHorizontal, Loader2, ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
+import {
+  Search,
+  SlidersHorizontal,
+  Loader2,
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import {
@@ -39,8 +49,11 @@ interface DataTableProps<TData> {
   empty?: ReactNode;
   rowActions?: (row: TData) => ReactNode;
   className?: string;
+  pageSize?: number;
 }
 
+const PAGE_SIZE_OPTIONS = [10, 25, 50];
+
 export function DataTable<TData>({
   columns,
   data,
@@ -50,10 +63,12 @@ export function DataTable<TData>({
   empty,
   rowActions,
   className,
+  pageSize = 10,
 }: DataTableProps<TData>) {
   const [sorting, setSorting] = useState<SortingState>([]);
   const [globalFilter, setGlobalFilter] = useState("");
   const [visibility, setVisibility] = useState<VisibilityState>({});
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize });
 
   const allColumns = useMemo<ColumnDef<TData, unknown>[]>(() => {
     if (!rowActions) return columns;
@@ -72,13 +87,15 @@ export function DataTable<TData>({
   const table = useReactTable({
     data,
     columns: allColumns,
-    state: { sorting, globalFilter, columnVisibility: visibility },
+    state: { sorting, globalFilter, columnVisibility: visibility, pagination },
     onSortingChange: setSorting,
     onGlobalFilterChange: setGlobalFilter,
     onColumnVisibilityChange: setVisibility,
+    onPaginationChange: setPagination,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
     globalFilterFn: (row, _columnId, filterValue) => {
       const q = String(filterValue ?? "").toLowerCase().trim();
       if (!q) return true;
@@ -103,7 +120,10 @@ export function DataTable<TData>({
           <Input
             placeholder={searchPlaceholder}
             value={globalFilter}
-            onChange={(e) => setGlobalFilter(e.target.value)}
+            onChange={(e) => {
+              setGlobalFilter(e.target.value);
+              setPagination((p) => ({ ...p, pageIndex: 0 }));
+            }}
             className="pl-8"
           />
         </div>
@@ -134,9 +154,9 @@ export function DataTable<TData>({
 
       <div className="rounded-lg border border-border bg-card overflow-hidden">
         <Table>
-          <TableHeader>
+          <TableHeader className="bg-muted/40">
             {table.getHeaderGroups().map((hg) => (
-              <TableRow key={hg.id}>
+              <TableRow key={hg.id} className="hover:bg-transparent">
                 {hg.headers.map((h) => {
                   const canSort = h.column.getCanSort();
                   const dir = h.column.getIsSorted();
@@ -197,6 +217,53 @@ export function DataTable<TData>({
           </TableBody>
         </Table>
       </div>
+
+      {table.getRowModel().rows.length > 0 ? (
+        <div className="flex items-center justify-between gap-3 flex-wrap text-sm text-muted-foreground">
+          <div className="flex items-center gap-2">
+            <span>Rows per page</span>
+            <select
+              value={table.getState().pagination.pageSize}
+              onChange={(e) => table.setPageSize(Number(e.target.value))}
+              className="h-8 rounded-md border border-border bg-transparent px-2 text-sm"
+            >
+              {PAGE_SIZE_OPTIONS.map((size) => (
+                <option key={size} value={size}>
+                  {size}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="flex items-center gap-3">
+            <span>
+              Page {table.getState().pagination.pageIndex + 1} of{" "}
+              {Math.max(1, table.getPageCount())} &middot; {table.getFilteredRowModel().rows.length} rows
+            </span>
+            <div className="flex items-center gap-1">
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => table.previousPage()}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => table.nextPage()}
+                disabled={!table.getCanNextPage()}
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      ) : null}
     </div>
   );
 }
diff --git a/src/components/shared/stat-card.tsx b/src/components/shared/stat-card.tsx
index 8de3181..ad5accd 100644
--- a/src/components/shared/stat-card.tsx
+++ b/src/components/shared/stat-card.tsx
@@ -23,19 +23,31 @@ interface StatCardProps {
 
 const variantBorder: Record<Variant, string> = {
   default: "border-border",
-  success: "border-emerald-700/50",
-  warning: "border-amber-700/50",
-  danger: "border-rose-700/50",
+  success: "border-success/30",
+  warning: "border-warning/30",
+  danger: "border-destructive/30",
   primary: "border-primary/40",
 };
 
+const variantIconTone: Record<Variant, string> = {
+  default: "bg-muted text-muted-foreground",
+  success: "bg-success/10 text-success",
+  warning: "bg-warning/10 text-warning",
+  danger: "bg-destructive/10 text-destructive",
+  primary: "bg-primary/10 text-primary",
+};
+
 export function StatCard({ label, value, subtext, icon, variant = "default", trend, className }: StatCardProps) {
   return (
     <Card className={cn("relative overflow-hidden", variantBorder[variant], className)}>
-      <CardContent className="p-5">
+      <CardContent className="p-6">
         <div className="flex items-start justify-between gap-2">
           <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{label}</p>
-          {icon ? <div className="text-muted-foreground [&>svg]:h-4 [&>svg]:w-4">{icon}</div> : null}
+          {icon ? (
+            <div className={cn("flex h-7 w-7 items-center justify-center rounded-md [&>svg]:h-4 [&>svg]:w-4", variantIconTone[variant])}>
+              {icon}
+            </div>
+          ) : null}
         </div>
         <div className="mt-3 flex items-baseline gap-2 text-2xl font-mono font-medium tabular-nums">
           {value}
@@ -53,7 +65,7 @@ function TrendBadge({ trend }: { trend: TrendInfo }) {
   const v = trend.value;
   const positive = trend.invert ? v < 0 : v > 0;
   const negative = trend.invert ? v > 0 : v < 0;
-  const tone = positive ? "text-emerald-300" : negative ? "text-rose-300" : "text-muted-foreground";
+  const tone = positive ? "text-success" : negative ? "text-destructive" : "text-muted-foreground";
   const Icon = v > 0 ? ArrowUp : v < 0 ? ArrowDown : Minus;
   const sign = v > 0 ? "+" : "";
   return (
diff --git a/src/components/shared/theme-toggle.tsx b/src/components/shared/theme-toggle.tsx
new file mode 100644
index 0000000..940d9d5
--- /dev/null
+++ b/src/components/shared/theme-toggle.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import { useTheme } from "next-themes";
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const noopSubscribe = () => () => {};
+
+function useMounted() {
+  return useSyncExternalStore(noopSubscribe, () => true, () => false);
+}
+
+export function ThemeToggle({ className }: { className?: string }) {
+  const { resolvedTheme, setTheme } = useTheme();
+  const mounted = useMounted();
+
+  const isDark = mounted && resolvedTheme === "dark";
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      className={cn("h-7 w-7 shrink-0", className)}
+      aria-label="Toggle theme"
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+    >
+      {mounted ? (
+        isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />
+      ) : (
+        <span className="h-4 w-4" />
+      )}
+    </Button>
+  );
+}
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index 8960756..3de0951 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -10,10 +10,10 @@ const badgeVariants = cva(
         default: "border-border bg-muted text-foreground",
         outline: "border-border text-foreground",
         primary: "border-primary/40 bg-primary/10 text-primary",
-        success: "border-emerald-700/50 bg-emerald-500/10 text-emerald-300",
-        warning: "border-amber-700/50 bg-amber-500/10 text-amber-300",
-        danger: "border-rose-700/50 bg-rose-500/10 text-rose-300",
-        info: "border-sky-700/50 bg-sky-500/10 text-sky-300",
+        success: "border-success/30 bg-success/10 text-success",
+        warning: "border-warning/30 bg-warning/10 text-warning",
+        danger: "border-destructive/30 bg-destructive/10 text-destructive",
+        info: "border-info/30 bg-info/10 text-info",
       },
     },
     defaultVariants: { variant: "default" },
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 9001ac7..91023d8 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -6,7 +6,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
     <div
       ref={ref}
       className={cn(
-        "rounded-lg border border-border bg-card text-card-foreground shadow-sm",
+        "rounded-lg border border-border bg-card text-card-foreground shadow-sm transition-shadow dark:shadow-black/20",
         className,
       )}
       {...props}
@@ -17,7 +17,7 @@ Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-5", className)} {...props} />
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
   ),
 );
 CardHeader.displayName = "CardHeader";
@@ -42,14 +42,14 @@ CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("p-5 pt-0", className)} {...props} />
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
   ),
 );
 CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex items-center p-5 pt-0", className)} {...props} />
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
   ),
 );
 CardFooter.displayName = "CardFooter";
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index a00516f..9f422bb 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -1,11 +1,13 @@
 "use client";
 
+import { useTheme } from "next-themes";
 import { Toaster as SonnerToaster } from "sonner";
 
 export function Toaster(props: React.ComponentProps<typeof SonnerToaster>) {
+  const { resolvedTheme } = useTheme();
   return (
     <SonnerToaster
-      theme="dark"
+      theme={resolvedTheme === "light" ? "light" : "dark"}
       toastOptions={{
         classNames: {
           toast:
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 2c948b0..3533255 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -30,12 +30,12 @@ export const HUSTLE_STATUS_LABELS: Record<HustleStatus, string> = {
 };
 
 export const HUSTLE_STATUS_TONES: Record<HustleStatus, string> = {
-  IDEA: "bg-zinc-700/40 text-zinc-200 border-zinc-600",
-  RESEARCH: "bg-sky-500/15 text-sky-300 border-sky-700/50",
-  BUILDING: "bg-amber-500/15 text-amber-300 border-amber-700/50",
-  LAUNCHED: "bg-emerald-500/15 text-emerald-300 border-emerald-700/50",
-  PAUSED: "bg-orange-500/15 text-orange-300 border-orange-700/50",
-  ARCHIVED: "bg-zinc-800 text-zinc-500 border-zinc-700",
+  IDEA: "bg-zinc-100 text-zinc-600 border-zinc-200 dark:bg-zinc-700/40 dark:text-zinc-200 dark:border-zinc-600",
+  RESEARCH: "bg-sky-100 text-sky-700 border-sky-200 dark:bg-sky-500/15 dark:text-sky-300 dark:border-sky-700/50",
+  BUILDING: "bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-500/15 dark:text-amber-300 dark:border-amber-700/50",
+  LAUNCHED: "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-500/15 dark:text-emerald-300 dark:border-emerald-700/50",
+  PAUSED: "bg-orange-100 text-orange-700 border-orange-200 dark:bg-orange-500/15 dark:text-orange-300 dark:border-orange-700/50",
+  ARCHIVED: "bg-zinc-100 text-zinc-400 border-zinc-200 dark:bg-zinc-800 dark:text-zinc-500 dark:border-zinc-700",
 };
 
 export const ORDER_STATUSES: OrderStatus[] = [
@@ -59,13 +59,13 @@ export const ORDER_STATUS_LABELS: Record<OrderStatus, string> = {
 };
 
 export const ORDER_STATUS_TONES: Record<OrderStatus, string> = {
-  PENDING: "bg-zinc-700/40 text-zinc-200 border-zinc-600",
-  CONFIRMED: "bg-sky-500/15 text-sky-300 border-sky-700/50",
-  IN_PRODUCTION: "bg-amber-500/15 text-amber-300 border-amber-700/50",
-  READY: "bg-violet-500/15 text-violet-300 border-violet-700/50",
-  SHIPPED: "bg-indigo-500/15 text-indigo-300 border-indigo-700/50",
-  DELIVERED: "bg-emerald-500/15 text-emerald-300 border-emerald-700/50",
-  CANCELLED: "bg-rose-500/15 text-rose-300 border-rose-700/50",
+  PENDING: "bg-zinc-100 text-zinc-600 border-zinc-200 dark:bg-zinc-700/40 dark:text-zinc-200 dark:border-zinc-600",
+  CONFIRMED: "bg-sky-100 text-sky-700 border-sky-200 dark:bg-sky-500/15 dark:text-sky-300 dark:border-sky-700/50",
+  IN_PRODUCTION: "bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-500/15 dark:text-amber-300 dark:border-amber-700/50",
+  READY: "bg-violet-100 text-violet-700 border-violet-200 dark:bg-violet-500/15 dark:text-violet-300 dark:border-violet-700/50",
+  SHIPPED: "bg-indigo-100 text-indigo-700 border-indigo-200 dark:bg-indigo-500/15 dark:text-indigo-300 dark:border-indigo-700/50",
+  DELIVERED: "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-500/15 dark:text-emerald-300 dark:border-emerald-700/50",
+  CANCELLED: "bg-rose-100 text-rose-700 border-rose-200 dark:bg-rose-500/15 dark:text-rose-300 dark:border-rose-700/50",
 };
 
 export const PAYMENT_STATUSES: PaymentStatus[] = ["UNPAID", "PARTIAL", "PAID"];
@@ -77,9 +77,9 @@ export const PAYMENT_STATUS_LABELS: Record<PaymentStatus, string> = {
 };
 
 export const PAYMENT_STATUS_TONES: Record<PaymentStatus, string> = {
-  UNPAID: "bg-rose-500/15 text-rose-300 border-rose-700/50",
-  PARTIAL: "bg-amber-500/15 text-amber-300 border-amber-700/50",
-  PAID: "bg-emerald-500/15 text-emerald-300 border-emerald-700/50",
+  UNPAID: "bg-rose-100 text-rose-700 border-rose-200 dark:bg-rose-500/15 dark:text-rose-300 dark:border-rose-700/50",
+  PARTIAL: "bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-500/15 dark:text-amber-300 dark:border-amber-700/50",
+  PAID: "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-500/15 dark:text-emerald-300 dark:border-emerald-700/50",
 };
 
 export const PAYMENT_METHODS: PaymentMethod[] = [
@@ -125,15 +125,15 @@ export const RESEARCH_CATEGORY_LABELS: Record<ResearchCategory, string> = {
 };
 
 export const RESEARCH_CATEGORY_TONES: Record<ResearchCategory, string> = {
-  PRODUCT: "bg-violet-500/15 text-violet-300 border-violet-700/50",
-  MARKET: "bg-sky-500/15 text-sky-300 border-sky-700/50",
-  SUPPLIER: "bg-amber-500/15 text-amber-300 border-amber-700/50",
-  LEGAL: "bg-rose-500/15 text-rose-300 border-rose-700/50",
-  COMPETITOR: "bg-orange-500/15 text-orange-300 border-orange-700/50",
-  PRICING: "bg-emerald-500/15 text-emerald-300 border-emerald-700/50",
-  CUSTOMER: "bg-indigo-500/15 text-indigo-300 border-indigo-700/50",
-  OPERATIONS: "bg-teal-500/15 text-teal-300 border-teal-700/50",
-  GENERAL: "bg-zinc-700/40 text-zinc-200 border-zinc-600",
+  PRODUCT: "bg-violet-100 text-violet-700 border-violet-200 dark:bg-violet-500/15 dark:text-violet-300 dark:border-violet-700/50",
+  MARKET: "bg-sky-100 text-sky-700 border-sky-200 dark:bg-sky-500/15 dark:text-sky-300 dark:border-sky-700/50",
+  SUPPLIER: "bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-500/15 dark:text-amber-300 dark:border-amber-700/50",
+  LEGAL: "bg-rose-100 text-rose-700 border-rose-200 dark:bg-rose-500/15 dark:text-rose-300 dark:border-rose-700/50",
+  COMPETITOR: "bg-orange-100 text-orange-700 border-orange-200 dark:bg-orange-500/15 dark:text-orange-300 dark:border-orange-700/50",
+  PRICING: "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-500/15 dark:text-emerald-300 dark:border-emerald-700/50",
+  CUSTOMER: "bg-indigo-100 text-indigo-700 border-indigo-200 dark:bg-indigo-500/15 dark:text-indigo-300 dark:border-indigo-700/50",
+  OPERATIONS: "bg-teal-100 text-teal-700 border-teal-200 dark:bg-teal-500/15 dark:text-teal-300 dark:border-teal-700/50",
+  GENERAL: "bg-zinc-100 text-zinc-600 border-zinc-200 dark:bg-zinc-700/40 dark:text-zinc-200 dark:border-zinc-600",
 };
 
 export const COST_CATEGORIES: CostCategory[] = [
@@ -175,10 +175,10 @@ export const TASK_PRIORITY_LABELS: Record<TaskPriority, string> = {
 };
 
 export const TASK_PRIORITY_TONES: Record<TaskPriority, string> = {
-  LOW: "bg-zinc-700/40 text-zinc-300 border-zinc-600",
-  MEDIUM: "bg-sky-500/15 text-sky-300 border-sky-700/50",
-  HIGH: "bg-amber-500/15 text-amber-300 border-amber-700/50",
-  CRITICAL: "bg-rose-500/15 text-rose-300 border-rose-700/50",
+  LOW: "bg-zinc-100 text-zinc-600 border-zinc-200 dark:bg-zinc-700/40 dark:text-zinc-300 dark:border-zinc-600",
+  MEDIUM: "bg-sky-100 text-sky-700 border-sky-200 dark:bg-sky-500/15 dark:text-sky-300 dark:border-sky-700/50",
+  HIGH: "bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-500/15 dark:text-amber-300 dark:border-amber-700/50",
+  CRITICAL: "bg-rose-100 text-rose-700 border-rose-200 dark:bg-rose-500/15 dark:text-rose-300 dark:border-rose-700/50",
 };
 
 export const TASK_STATUSES: TaskStatus[] = ["TODO", "IN_PROGRESS", "DONE", "CANCELLED"];
@@ -191,10 +191,10 @@ export const TASK_STATUS_LABELS: Record<TaskStatus, string> = {
 };
 
 export const TASK_STATUS_TONES: Record<TaskStatus, string> = {
-  TODO: "bg-zinc-700/40 text-zinc-300 border-zinc-600",
-  IN_PROGRESS: "bg-amber-500/15 text-amber-300 border-amber-700/50",
-  DONE: "bg-emerald-500/15 text-emerald-300 border-emerald-700/50",
-  CANCELLED: "bg-rose-500/15 text-rose-300 border-rose-700/50",
+  TODO: "bg-zinc-100 text-zinc-600 border-zinc-200 dark:bg-zinc-700/40 dark:text-zinc-300 dark:border-zinc-600",
+  IN_PROGRESS: "bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-500/15 dark:text-amber-300 dark:border-amber-700/50",
+  DONE: "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-500/15 dark:text-emerald-300 dark:border-emerald-700/50",
+  CANCELLED: "bg-rose-100 text-rose-700 border-rose-200 dark:bg-rose-500/15 dark:text-rose-300 dark:border-rose-700/50",
 };
 
 export const TRANSACTION_TYPES: TransactionType[] = ["INCOME", "EXPENSE"];
diff --git a/src/schemas/hustle.ts b/src/schemas/hustle.ts
index f1c7494..7a0ebb1 100644
--- a/src/schemas/hustle.ts
+++ b/src/schemas/hustle.ts
@@ -3,7 +3,7 @@ import { CURRENCY_OPTIONS, HUSTLE_STATUSES } from "@/lib/constants";
 
 export const hustleSchema = z.object({
   name: z.string().min(2, "Name must be at least 2 characters.").max(80),
-  color: z.string().regex(/^#[0-9a-fA-F]{6}$/, "Must be a valid hex color.").default("#6366f1"),
+  color: z.string().regex(/^#[0-9a-fA-F]{6}$/, "Must be a valid hex color.").default("#14b8a6"),
   description: z.string().max(500).optional().or(z.literal("")),
   currency: z.enum(CURRENCY_OPTIONS),
   status: z.enum(HUSTLE_STATUSES as [string, ...string[]]),

From 075b868520394f5b1dc6cb0677282f511f3e6bea Mon Sep 17 00:00:00 2001
From: Aneeb <aneebbaig123@gmail.com>
Date: Sat, 4 Jul 2026 20:40:52 +0500
Subject: [PATCH 2/2] feat(auth): migrate from NextAuth to better-auth (fleet
 standard)

Adopts better-auth as the single auth system per the app-starter-skills
standard. Verified end-to-end against the dev DB: owner signup, single-
owner lockdown, login, and wrong-password rejection all behave correctly.

- better-auth server (lib/auth.ts): email+password, twoFactor (TOTP +
  backup codes, built-in verification lockout), bearer (mobile tokens),
  rateLimit, and a databaseHooks guard enforcing SINGLE OWNER (first
  sign-up allowed, all later ones rejected even via direct API).
- Route handler api/auth/[...all]; client lib/auth-client.ts with
  twoFactorClient; middleware uses getSessionCookie (edge-safe).
- Rewrote auth-actions/auth-service/_helpers/layout/account to the
  better-auth server API; removed the NextAuth files and the custom
  bcrypt/passwordHash path.
- Prisma: better-auth tables (user/session/account/verification/
  twoFactor) generated via the CLI; dropped User.passwordHash.
- 2FA UI: account TotpCard (password step-up to enable AND disable) and
  a /login/2fa step; login routes there on twoFactorRedirect.
- Seed no longer creates a default-credential user; the owner is created
  through /setup. Removed next-auth, @auth/prisma-adapter, bcryptjs.
---
 package.json                            |   4 +-
 pnpm-lock.yaml                          | 375 ++++++++++++++++++------
 prisma/schema.prisma                    | 187 ++++++++----
 prisma/seed.ts                          |  14 +-
 src/actions/_helpers.ts                 |   5 +-
 src/actions/auth-actions.ts             |  63 ++--
 src/app/(app)/account/page.tsx          |   8 +-
 src/app/(app)/account/totp-card.tsx     | 141 +++++++++
 src/app/(app)/layout.tsx                |   5 +-
 src/app/(auth)/login/2fa/page.tsx       |  70 +++++
 src/app/(auth)/login/login-form.tsx     |   4 +
 src/app/api/auth/[...all]/route.ts      |   4 +
 src/app/api/auth/[...nextauth]/route.ts |   3 -
 src/auth/config.ts                      |  26 --
 src/auth/index.ts                       |  27 --
 src/auth/types.d.ts                     |   9 -
 src/lib/auth-client.ts                  |  17 ++
 src/lib/auth.ts                         |  48 +++
 src/lib/env.ts                          |   4 +
 src/proxy.ts                            |  15 +-
 src/repositories/user-repository.ts     |   6 -
 src/services/auth-service.ts            |  50 +---
 22 files changed, 769 insertions(+), 316 deletions(-)
 create mode 100644 src/app/(app)/account/totp-card.tsx
 create mode 100644 src/app/(auth)/login/2fa/page.tsx
 create mode 100644 src/app/api/auth/[...all]/route.ts
 delete mode 100644 src/app/api/auth/[...nextauth]/route.ts
 delete mode 100644 src/auth/config.ts
 delete mode 100644 src/auth/index.ts
 delete mode 100644 src/auth/types.d.ts
 create mode 100644 src/lib/auth-client.ts
 create mode 100644 src/lib/auth.ts

diff --git a/package.json b/package.json
index b4b2692..a87d5f5 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,6 @@
     "@ai-sdk/google": "^4.0.8",
     "@ai-sdk/openai": "^4.0.7",
     "@ai-sdk/openai-compatible": "^3.0.5",
-    "@auth/prisma-adapter": "^2.7.4",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -60,7 +59,7 @@
     "@tanstack/react-table": "^8.20.5",
     "@vercel/analytics": "^2.0.1",
     "ai": "^7.0.14",
-    "bcryptjs": "^3.0.3",
+    "better-auth": "^1.6.23",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
@@ -69,7 +68,6 @@
     "geist": "^1.3.1",
     "lucide-react": "^1.16.0",
     "next": "^16.2.6",
-    "next-auth": "5.0.0-beta.31",
     "next-themes": "^0.4.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fda9630..ea04ff4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,9 +17,6 @@ importers:
       '@ai-sdk/openai-compatible':
         specifier: ^3.0.5
         version: 3.0.5(zod@4.4.3)
-      '@auth/prisma-adapter':
-        specifier: ^2.7.4
-        version: 2.11.2(@prisma/client@7.8.0(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@6.0.3))(typescript@6.0.3))
       '@dnd-kit/core':
         specifier: ^6.3.1
         version: 6.3.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -92,9 +89,9 @@ importers:
       ai:
         specifier: ^7.0.14
         version: 7.0.14(zod@4.4.3)
-      bcryptjs:
-        specifier: ^3.0.3
-        version: 3.0.3
+      better-auth:
+        specifier: ^1.6.23
+        version: 1.6.23(@prisma/client@7.8.0(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@6.0.3))(typescript@6.0.3))(mysql2@3.15.3)(next@16.2.6(@babel/core@7.29.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(pg@8.21.0)(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@6.0.3))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -119,9 +116,6 @@ importers:
       next:
         specifier: ^16.2.6
         version: 16.2.6(@babel/core@7.29.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      next-auth:
-        specifier: 5.0.0-beta.31
-        version: 5.0.0-beta.31(next@16.2.6(@babel/core@7.29.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)
       next-themes:
         specifier: ^0.4.4
         version: 0.4.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -233,25 +227,6 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
-  '@auth/core@0.41.2':
-    resolution: {integrity: sha512-Hx5MNBxN2fJTbJKGUKAA0wca43D0Akl3TvufY54Gn8lop7F+34vU1zA1pn0vQfIoVuLIrpfc2nkyjwIaPJMW7w==}
-    peerDependencies:
-      '@simplewebauthn/browser': ^9.0.1
-      '@simplewebauthn/server': ^9.0.2
-      nodemailer: ^7.0.7
-    peerDependenciesMeta:
-      '@simplewebauthn/browser':
-        optional: true
-      '@simplewebauthn/server':
-        optional: true
-      nodemailer:
-        optional: true
-
-  '@auth/prisma-adapter@2.11.2':
-    resolution: {integrity: sha512-GyNEUNtrPgDPs0M4xX6F5i7jTsCKwU6BXV9zutctcoo6K1Ud+juckrmQS11uyNgeWsw6sliextHbU/e+8lsizQ==}
-    peerDependencies:
-      '@prisma/client': '>=2.26.0 || >=3 || >=4 || >=5 || >=6'
-
   '@babel/code-frame@7.29.0':
     resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
@@ -319,6 +294,85 @@ packages:
     resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
     engines: {node: '>=6.9.0'}
 
+  '@better-auth/core@1.6.23':
+    resolution: {integrity: sha512-beEhOs0uVeOxYOZKUfIEBd/nQV2Bd4/6wyLxZ0OFkn6CMTK2Vi+hXuZLnyPBeB6RdHpebEoJWiHqwHxBIxgPDQ==}
+    peerDependencies:
+      '@better-auth/utils': 0.4.2
+      '@better-fetch/fetch': 1.3.1
+      '@cloudflare/workers-types': '>=4'
+      '@opentelemetry/api': ^1.9.0
+      better-call: 1.3.7
+      jose: ^6.1.0
+      kysely: ^0.28.5 || ^0.29.0
+      nanostores: ^1.0.1
+    peerDependenciesMeta:
+      '@cloudflare/workers-types':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
+
+  '@better-auth/drizzle-adapter@1.6.23':
+    resolution: {integrity: sha512-2+/PTVfIP9E7iz6af8TB3lhnowHUj9ljC66kECmHaFEdUqPgzHoWux9epotKwO7XDg2ui4ttWQ8CMeNFLvQeKQ==}
+    peerDependencies:
+      '@better-auth/core': ^1.6.23
+      '@better-auth/utils': 0.4.2
+      drizzle-orm: ^0.45.2
+    peerDependenciesMeta:
+      drizzle-orm:
+        optional: true
+
+  '@better-auth/kysely-adapter@1.6.23':
+    resolution: {integrity: sha512-zbNJsMbG09exfkGyvFqBLLqWoMPAUWjxCuUnEK5AsjbYoZeIjj/QGZgdf4CapVWryKxjA9Q6Jlr6fbiPpC3VAg==}
+    peerDependencies:
+      '@better-auth/core': ^1.6.23
+      '@better-auth/utils': 0.4.2
+      kysely: ^0.28.17 || ^0.29.0
+    peerDependenciesMeta:
+      kysely:
+        optional: true
+
+  '@better-auth/memory-adapter@1.6.23':
+    resolution: {integrity: sha512-krIiR0pIVkaKlAzm690n5bcMW4NGbqeMg0HQSD9fz/KcQF/eWLqcq9gG/BhHTj2i/y96qH+W5JWPmaSOS5iTgQ==}
+    peerDependencies:
+      '@better-auth/core': ^1.6.23
+      '@better-auth/utils': 0.4.2
+
+  '@better-auth/mongo-adapter@1.6.23':
+    resolution: {integrity: sha512-7+QdevitGlKBbP6JbiSk5SBnzPsKV/mDrQBGBn8hwByQLeJwqpqbuBPw7ZI8vzUlFfAAnyFiqwP3Eb8mxnp7pA==}
+    peerDependencies:
+      '@better-auth/core': ^1.6.23
+      '@better-auth/utils': 0.4.2
+      mongodb: ^6.0.0 || ^7.0.0
+    peerDependenciesMeta:
+      mongodb:
+        optional: true
+
+  '@better-auth/prisma-adapter@1.6.23':
+    resolution: {integrity: sha512-2qSdzidq4tkb1eS5TTqb4Nzg0mdZWm3Qky9SYeXeb8PpVQbC2sxqJhEM5mK7y12uU6I8hc64wO9f7AFVNL+6UQ==}
+    peerDependencies:
+      '@better-auth/core': ^1.6.23
+      '@better-auth/utils': 0.4.2
+      '@prisma/client': ^5.0.0 || ^6.0.0 || ^7.0.0
+      prisma: ^5.0.0 || ^6.0.0 || ^7.0.0
+    peerDependenciesMeta:
+      '@prisma/client':
+        optional: true
+      prisma:
+        optional: true
+
+  '@better-auth/telemetry@1.6.23':
+    resolution: {integrity: sha512-/R2Kb+z2BpDOOWwVHqOk+c0VNpuwfCv4Hp5Yr9003WIZPax/zyNraGLB9CFE8qF2gZW8Dsz419k4I8CPrGzpDA==}
+    peerDependencies:
+      '@better-auth/core': ^1.6.23
+      '@better-auth/utils': 0.4.2
+      '@better-fetch/fetch': 1.3.1
+
+  '@better-auth/utils@0.4.2':
+    resolution: {integrity: sha512-AUxrvu+HaaODsUyzDxFgwd/8RZ1yZaYo42LXKSrU2oGgR38pS1ij8nqQKNgtTWoYGpNevNXtCfgTy6loHveW9A==}
+
+  '@better-fetch/fetch@1.3.1':
+    resolution: {integrity: sha512-ABkD1WhyfPZprKRQI3bhATjeiFuNWC9PXhfGWqL+sg/gKrM977oFrYkdb4msM3hgUGonr7KlOsOFT5TU2rht9g==}
+
   '@dnd-kit/accessibility@3.1.1':
     resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
     peerDependencies:
@@ -817,6 +871,14 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@noble/ciphers@2.2.0':
+    resolution: {integrity: sha512-Z6pjIZ/8IJcCGzb2S/0Px5J81yij85xASuk1teLNeg75bfT07MV3a/O2Mtn1I2se43k3lkVEcFaR10N4cgQcZA==}
+    engines: {node: '>= 20.19.0'}
+
+  '@noble/hashes@2.2.0':
+    resolution: {integrity: sha512-IYqDGiTXab6FniAgnSdZwgWbomxpy9FtYvLKs7wCUs2a8RkITG+DFGO1DM9cr+E3/RgADRpFjrKVaJ1z6sjtEg==}
+    engines: {node: '>= 20.19.0'}
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -833,8 +895,9 @@ packages:
     resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
     engines: {node: '>=12.4.0'}
 
-  '@panva/hkdf@1.2.1':
-    resolution: {integrity: sha512-6oclG6Y3PiDFcoyk8srjLfVKyMfVCKJ27JwNPViuXziFpmdz+MZnZN/aKY0JGXgYuO/VghU0jcOAZgWXZ1Dmrw==}
+  '@opentelemetry/semantic-conventions@1.41.1':
+    resolution: {integrity: sha512-/UhIkaZgPutTFmQ7RnIJGgDXZmtEJ7Dvi86xNTFWcnRxVRNk/aotsqDJYeEvDP+FSMB2SdW+pQzNMcWP0rwuNA==}
+    engines: {node: '>=14'}
 
   '@prisma/adapter-pg@7.8.0':
     resolution: {integrity: sha512-ygb3UkerK3v8MDpXVgCISdRNDozpxh6+JVJgiIGbSr5KBgz10LLf5ejUskPGoXlsIjxsOu6nuy1JVQr2EKGSlg==}
@@ -1884,9 +1947,75 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  bcryptjs@3.0.3:
-    resolution: {integrity: sha512-GlF5wPWnSa/X5LKM1o0wz0suXIINz1iHRLvTS+sLyi7XPbe5ycmYI3DlZqVGZZtDgl4DmasFg7gOB3JYbphV5g==}
-    hasBin: true
+  better-auth@1.6.23:
+    resolution: {integrity: sha512-4vOaRd9UiKGKm9R+ej0jjU1es3MiJIiNc9Qq3VCnYqOZ4/nb5272QqTxWYoDxyUXl5x6A2x2we5KZKQO9teTQQ==}
+    peerDependencies:
+      '@lynx-js/react': '*'
+      '@prisma/client': ^5.0.0 || ^6.0.0 || ^7.0.0
+      '@sveltejs/kit': ^2.0.0
+      '@tanstack/react-start': ^1.0.0
+      '@tanstack/solid-start': ^1.0.0
+      better-sqlite3: ^12.0.0
+      drizzle-kit: '>=0.31.4'
+      drizzle-orm: ^0.45.2
+      mongodb: ^6.0.0 || ^7.0.0
+      mysql2: ^3.0.0
+      next: ^14.0.0 || ^15.0.0 || ^16.0.0
+      pg: ^8.0.0
+      prisma: ^5.0.0 || ^6.0.0 || ^7.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+      solid-js: ^1.0.0
+      svelte: ^4.0.0 || ^5.0.0
+      vitest: ^2.0.0 || ^3.0.0 || ^4.0.0
+      vue: ^3.0.0
+    peerDependenciesMeta:
+      '@lynx-js/react':
+        optional: true
+      '@prisma/client':
+        optional: true
+      '@sveltejs/kit':
+        optional: true
+      '@tanstack/react-start':
+        optional: true
+      '@tanstack/solid-start':
+        optional: true
+      better-sqlite3:
+        optional: true
+      drizzle-kit:
+        optional: true
+      drizzle-orm:
+        optional: true
+      mongodb:
+        optional: true
+      mysql2:
+        optional: true
+      next:
+        optional: true
+      pg:
+        optional: true
+      prisma:
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+      solid-js:
+        optional: true
+      svelte:
+        optional: true
+      vitest:
+        optional: true
+      vue:
+        optional: true
+
+  better-call@1.3.7:
+    resolution: {integrity: sha512-Al51/hjp2SSp6CRTa3F2ptcx4yQVS1xWKoY6jcVXqNYOap6mHFP2jUBn5EwIL4iIed1/Sq4hlQ+Umm6EflZG+w==}
+    peerDependencies:
+      zod: ^4.0.0
+    peerDependenciesMeta:
+      zod:
+        optional: true
 
   better-result@2.9.2:
     resolution: {integrity: sha512-WIFoBPCdnTOdk9inkE1ZRvCZ4P0CpSkAiLlchC65N7n9DcjZ3NhqkBOlafzpOVnO8ixyi37kicmSJ3ENhPZl7Q==}
@@ -2714,6 +2843,10 @@ packages:
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
+  kysely@0.29.2:
+    resolution: {integrity: sha512-s6WVJyEZrbm6jhBpiKHsGHyePMrVQKJ85wZCFCr9W4QHv6WTjWIrdvTmO9hDEA3bNK0xkrE2DqrHsXMLWuZpQg==}
+    engines: {node: '>=22.0.0'}
+
   language-subtag-registry@0.3.23:
     resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
 
@@ -2862,6 +2995,10 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanostores@1.4.0:
+    resolution: {integrity: sha512-i0tloweeudshAEuddpDxcg9Ik6pkPfVsHIgKyf143JrgG7/MOh0+q7BypdLXZPoOP7fOYt1eTcwGkyiVmhJFkA==}
+    engines: {node: ^20.0.0 || >=22.0.0}
+
   napi-postinstall@0.3.4:
     resolution: {integrity: sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
@@ -2870,22 +3007,6 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
-  next-auth@5.0.0-beta.31:
-    resolution: {integrity: sha512-1OBgCKPzo+S7UWWMp3xgvGvIJ0OpV7B3vR4ZDRqD9a4Ch+OT6dakLXG9ivhtmIWVa71nTSXattOHyCg8sNi8/Q==}
-    peerDependencies:
-      '@simplewebauthn/browser': ^9.0.1
-      '@simplewebauthn/server': ^9.0.2
-      next: ^14.0.0-0 || ^15.0.0 || ^16.0.0
-      nodemailer: ^7.0.7
-      react: ^18.2.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@simplewebauthn/browser':
-        optional: true
-      '@simplewebauthn/server':
-        optional: true
-      nodemailer:
-        optional: true
-
   next-themes@0.4.6:
     resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
     peerDependencies:
@@ -2920,9 +3041,6 @@ packages:
   node-releases@2.0.44:
     resolution: {integrity: sha512-5WUyunoPMsvvEhS8AxHtRzP+oA8UCkJ7YRxatWKjngndhDGLiqEVAQKWjFAiAiuL8zMRGzGSJxFnLetoa43qGQ==}
 
-  oauth4webapi@3.8.6:
-    resolution: {integrity: sha512-iwemM91xz8nryHti2yTmg5fhyEMVOkOXwHNqbvcATjyajb5oQxCQzrNOA6uElRHuMhQQTKUyFKV9y/CNyg25BQ==}
-
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -3079,14 +3197,6 @@ packages:
     resolution: {integrity: sha512-Jtc2612XINuBjIl/QTWsV5UvE8UHuNblcO3vVADSrKsrc6RqGX6lOW1cEo3CM2v0XG4Nat8nI+YM7/f26VxXLw==}
     engines: {node: '>=12'}
 
-  preact-render-to-string@6.5.11:
-    resolution: {integrity: sha512-ubnauqoGczeGISiOh6RjX0/cdaF8v/oDXIjO85XALCQjwQP+SB4RDXXtvZ6yTYSjG+PC1QRP2AhPgCEsM2EvUw==}
-    peerDependencies:
-      preact: '>=10'
-
-  preact@10.24.3:
-    resolution: {integrity: sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==}
-
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -3244,6 +3354,9 @@ packages:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
+  rou3@0.7.12:
+    resolution: {integrity: sha512-iFE4hLDuloSWcD7mjdCDhx2bKcIsYbtOTpfH5MHHLSKMOUyjqQXTeZVa289uuwEGEKFoE/BAPbhaU4B774nceg==}
+
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
@@ -3277,6 +3390,9 @@ packages:
   seq-queue@0.0.5:
     resolution: {integrity: sha512-hr3Wtp/GZIc/6DAGPDcV4/9WoZhjrkXsi5B/07QgX8tsdc6ilr7BFM6PM6rbdAX1kFSDYeZGLipIZZKyQP0O5Q==}
 
+  set-cookie-parser@3.1.1:
+    resolution: {integrity: sha512-vM9SUhjsUYs6UeJUmygc5Ofm5eQGe85riob5ju6XCgFGJI5PLV4nrDAQpQjd+LkFBpAkADn5BQQpZ9EUNkyLuA==}
+
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -3641,23 +3757,6 @@ snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
-  '@auth/core@0.41.2':
-    dependencies:
-      '@panva/hkdf': 1.2.1
-      jose: 6.2.3
-      oauth4webapi: 3.8.6
-      preact: 10.24.3
-      preact-render-to-string: 6.5.11(preact@10.24.3)
-
-  '@auth/prisma-adapter@2.11.2(@prisma/client@7.8.0(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@6.0.3))(typescript@6.0.3))':
-    dependencies:
-      '@auth/core': 0.41.2
-      '@prisma/client': 7.8.0(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@6.0.3))(typescript@6.0.3)
-    transitivePeerDependencies:
-      - '@simplewebauthn/browser'
-      - '@simplewebauthn/server'
-      - nodemailer
-
   '@babel/code-frame@7.29.0':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -3758,6 +3857,60 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
+  '@better-auth/core@1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.4.0)':
+    dependencies:
+      '@better-auth/utils': 0.4.2
+      '@better-fetch/fetch': 1.3.1
+      '@opentelemetry/semantic-conventions': 1.41.1
+      '@standard-schema/spec': 1.1.0
+      better-call: 1.3.7(zod@4.4.3)
+      jose: 6.2.3
+      kysely: 0.29.2
+      nanostores: 1.4.0
+      zod: 4.4.3
+
+  '@better-auth/drizzle-adapter@1.6.23(@better-auth/core@1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.4.0))(@better-auth/utils@0.4.2)':
+    dependencies:
+      '@better-auth/core': 1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.4.0)
+      '@better-auth/utils': 0.4.2
+
+  '@better-auth/kysely-adapter@1.6.23(@better-auth/core@1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.4.0))(@better-auth/utils@0.4.2)(kysely@0.29.2)':
+    dependencies:
+      '@better-auth/core': 1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.4.0)
+      '@better-auth/utils': 0.4.2
+    optionalDependencies:
+      kysely: 0.29.2
+
+  '@better-auth/memory-adapter@1.6.23(@better-auth/core@1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.4.0))(@better-auth/utils@0.4.2)':
+    dependencies:
+      '@better-auth/core': 1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.4.0)
+      '@better-auth/utils': 0.4.2
+
+  '@better-auth/mongo-adapter@1.6.23(@better-auth/core@1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.4.0))(@better-auth/utils@0.4.2)':
+    dependencies:
+      '@better-auth/core': 1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.4.0)
+      '@better-auth/utils': 0.4.2
+
+  '@better-auth/prisma-adapter@1.6.23(@better-auth/core@1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.4.0))(@better-auth/utils@0.4.2)(@prisma/client@7.8.0(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@6.0.3))(typescript@6.0.3))(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@6.0.3))':
+    dependencies:
+      '@better-auth/core': 1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.4.0)
+      '@better-auth/utils': 0.4.2
+    optionalDependencies:
+      '@prisma/client': 7.8.0(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@6.0.3))(typescript@6.0.3)
+      prisma: 7.8.0(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@6.0.3)
+
+  '@better-auth/telemetry@1.6.23(@better-auth/core@1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.4.0))(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)':
+    dependencies:
+      '@better-auth/core': 1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.4.0)
+      '@better-auth/utils': 0.4.2
+      '@better-fetch/fetch': 1.3.1
+
+  '@better-auth/utils@0.4.2':
+    dependencies:
+      '@noble/hashes': 2.2.0
+
+  '@better-fetch/fetch@1.3.1': {}
+
   '@dnd-kit/accessibility@3.1.1(react@19.2.6)':
     dependencies:
       react: 19.2.6
@@ -4130,6 +4283,10 @@ snapshots:
   '@next/swc-win32-x64-msvc@16.2.6':
     optional: true
 
+  '@noble/ciphers@2.2.0': {}
+
+  '@noble/hashes@2.2.0': {}
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -4144,7 +4301,7 @@ snapshots:
 
   '@nolyfill/is-core-module@1.0.39': {}
 
-  '@panva/hkdf@1.2.1': {}
+  '@opentelemetry/semantic-conventions@1.41.1': {}
 
   '@prisma/adapter-pg@7.8.0':
     dependencies:
@@ -5204,7 +5361,45 @@ snapshots:
 
   baseline-browser-mapping@2.10.31: {}
 
-  bcryptjs@3.0.3: {}
+  better-auth@1.6.23(@prisma/client@7.8.0(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@6.0.3))(typescript@6.0.3))(mysql2@3.15.3)(next@16.2.6(@babel/core@7.29.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(pg@8.21.0)(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@6.0.3))(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
+    dependencies:
+      '@better-auth/core': 1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.4.0)
+      '@better-auth/drizzle-adapter': 1.6.23(@better-auth/core@1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.4.0))(@better-auth/utils@0.4.2)
+      '@better-auth/kysely-adapter': 1.6.23(@better-auth/core@1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.4.0))(@better-auth/utils@0.4.2)(kysely@0.29.2)
+      '@better-auth/memory-adapter': 1.6.23(@better-auth/core@1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.4.0))(@better-auth/utils@0.4.2)
+      '@better-auth/mongo-adapter': 1.6.23(@better-auth/core@1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.4.0))(@better-auth/utils@0.4.2)
+      '@better-auth/prisma-adapter': 1.6.23(@better-auth/core@1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.4.0))(@better-auth/utils@0.4.2)(@prisma/client@7.8.0(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@6.0.3))(typescript@6.0.3))(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@6.0.3))
+      '@better-auth/telemetry': 1.6.23(@better-auth/core@1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.4.0))(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)
+      '@better-auth/utils': 0.4.2
+      '@better-fetch/fetch': 1.3.1
+      '@noble/ciphers': 2.2.0
+      '@noble/hashes': 2.2.0
+      better-call: 1.3.7(zod@4.4.3)
+      defu: 6.1.7
+      jose: 6.2.3
+      kysely: 0.29.2
+      nanostores: 1.4.0
+      zod: 4.4.3
+    optionalDependencies:
+      '@prisma/client': 7.8.0(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@6.0.3))(typescript@6.0.3)
+      mysql2: 3.15.3
+      next: 16.2.6(@babel/core@7.29.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      pg: 8.21.0
+      prisma: 7.8.0(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@6.0.3)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    transitivePeerDependencies:
+      - '@cloudflare/workers-types'
+      - '@opentelemetry/api'
+
+  better-call@1.3.7(zod@4.4.3):
+    dependencies:
+      '@better-auth/utils': 0.4.2
+      '@better-fetch/fetch': 1.3.1
+      rou3: 0.7.12
+      set-cookie-parser: 3.1.1
+    optionalDependencies:
+      zod: 4.4.3
 
   better-result@2.9.2: {}
 
@@ -6173,6 +6368,8 @@ snapshots:
     dependencies:
       json-buffer: 3.0.1
 
+  kysely@0.29.2: {}
+
   language-subtag-registry@0.3.23: {}
 
   language-tags@1.0.9:
@@ -6298,16 +6495,12 @@ snapshots:
 
   nanoid@3.3.12: {}
 
+  nanostores@1.4.0: {}
+
   napi-postinstall@0.3.4: {}
 
   natural-compare@1.4.0: {}
 
-  next-auth@5.0.0-beta.31(next@16.2.6(@babel/core@7.29.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6):
-    dependencies:
-      '@auth/core': 0.41.2
-      next: 16.2.6(@babel/core@7.29.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      react: 19.2.6
-
   next-themes@0.4.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
       react: 19.2.6
@@ -6346,8 +6539,6 @@ snapshots:
 
   node-releases@2.0.44: {}
 
-  oauth4webapi@3.8.6: {}
-
   object-assign@4.1.1: {}
 
   object-inspect@1.13.4: {}
@@ -6504,12 +6695,6 @@ snapshots:
 
   postgres@3.4.7: {}
 
-  preact-render-to-string@6.5.11(preact@10.24.3):
-    dependencies:
-      preact: 10.24.3
-
-  preact@10.24.3: {}
-
   prelude-ls@1.2.1: {}
 
   prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@6.0.3):
@@ -6674,6 +6859,8 @@ snapshots:
 
   reusify@1.1.0: {}
 
+  rou3@0.7.12: {}
+
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
@@ -6707,6 +6894,8 @@ snapshots:
 
   seq-queue@0.0.5: {}
 
+  set-cookie-parser@3.1.1: {}
+
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index ae59cf9..034e3f8 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -1,3 +1,4 @@
+
 generator client {
   provider = "prisma-client"
   output   = "../src/generated/prisma"
@@ -21,7 +22,6 @@ model User {
   id           String   @id @default(cuid())
   email        String   @unique
   name         String?
-  passwordHash String
   createdAt    DateTime @default(now())
   updatedAt    DateTime @updatedAt
 
@@ -29,6 +29,14 @@ model User {
   aiApiKeyEncrypted String?
   aiModel           String?
   aiBaseUrl         String?
+  emailVerified     Boolean     @default(false)
+  image             String?
+  twoFactorEnabled  Boolean?    @default(false)
+  sessions          Session[]
+  accounts          Account[]
+  twofactors        TwoFactor[]
+
+  @@map("user")
 }
 
 // =========================================================================
@@ -132,16 +140,16 @@ enum ProductStatus {
 }
 
 model Product {
-  id             String        @id @default(cuid())
-  hustleId       String
-  name           String
-  description    String?
-  notes          String?
-  status         ProductStatus @default(RESEARCH)
-  coverImageUrl  String?
-  sortOrder      Int           @default(0)
-  createdAt      DateTime      @default(now())
-  updatedAt      DateTime      @updatedAt
+  id            String        @id @default(cuid())
+  hustleId      String
+  name          String
+  description   String?
+  notes         String?
+  status        ProductStatus @default(RESEARCH)
+  coverImageUrl String?
+  sortOrder     Int           @default(0)
+  createdAt     DateTime      @default(now())
+  updatedAt     DateTime      @updatedAt
 
   hustle       Hustle               @relation(fields: [hustleId], references: [id], onDelete: Cascade)
   costItems    CostItem[]
@@ -222,20 +230,20 @@ model Supplier {
 // =========================================================================
 
 model InventoryItem {
-  id          String   @id @default(cuid())
-  hustleId    String
-  name        String
-  sku         String?
-  unit        String   @default("unit")
-  quantity    Decimal  @default(0) @db.Decimal(14, 2)
-  reorderAt   Decimal  @default(0) @db.Decimal(14, 2)
-  unitCost    Decimal  @default(0) @db.Decimal(14, 2)
-  notes       String?
-  url         String?
-  createdAt   DateTime @default(now())
-  updatedAt   DateTime @updatedAt
+  id        String   @id @default(cuid())
+  hustleId  String
+  name      String
+  sku       String?
+  unit      String   @default("unit")
+  quantity  Decimal  @default(0) @db.Decimal(14, 2)
+  reorderAt Decimal  @default(0) @db.Decimal(14, 2)
+  unitCost  Decimal  @default(0) @db.Decimal(14, 2)
+  notes     String?
+  url       String?
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
 
-  hustle      Hustle               @relation(fields: [hustleId], references: [id], onDelete: Cascade)
+  hustle      Hustle                @relation(fields: [hustleId], references: [id], onDelete: Cascade)
   adjustments InventoryAdjustment[]
 
   @@index([hustleId])
@@ -259,17 +267,17 @@ model InventoryAdjustment {
 // =========================================================================
 
 model Customer {
-  id          String   @id @default(cuid())
-  hustleId    String
-  name        String
-  phone       String?
-  email       String?
-  city        String?
-  address     String?
-  source      String?
-  notes       String?
-  createdAt   DateTime @default(now())
-  updatedAt   DateTime @updatedAt
+  id        String   @id @default(cuid())
+  hustleId  String
+  name      String
+  phone     String?
+  email     String?
+  city      String?
+  address   String?
+  source    String?
+  notes     String?
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
 
   hustle Hustle  @relation(fields: [hustleId], references: [id], onDelete: Cascade)
   orders Order[]
@@ -308,26 +316,26 @@ enum PaymentMethod {
 }
 
 model Order {
-  id              String        @id @default(cuid())
-  hustleId        String
-  customerId      String?
-  orderNumber     String
-  customerName    String
-  status          OrderStatus   @default(PENDING)
-  paymentStatus   PaymentStatus @default(UNPAID)
-  paymentMethod   PaymentMethod?
-  shippingCost    Decimal       @default(0) @db.Decimal(14, 2)
-  discount        Decimal       @default(0) @db.Decimal(14, 2)
-  total           Decimal       @default(0) @db.Decimal(14, 2)
-  amountPaid      Decimal       @default(0) @db.Decimal(14, 2)
-  customizations  Json?
-  notes           String?
-  dueDate         DateTime?
-  createdAt       DateTime      @default(now())
-  updatedAt       DateTime      @updatedAt
-
-  hustle   Hustle              @relation(fields: [hustleId], references: [id], onDelete: Cascade)
-  customer Customer?           @relation(fields: [customerId], references: [id], onDelete: SetNull)
+  id             String         @id @default(cuid())
+  hustleId       String
+  customerId     String?
+  orderNumber    String
+  customerName   String
+  status         OrderStatus    @default(PENDING)
+  paymentStatus  PaymentStatus  @default(UNPAID)
+  paymentMethod  PaymentMethod?
+  shippingCost   Decimal        @default(0) @db.Decimal(14, 2)
+  discount       Decimal        @default(0) @db.Decimal(14, 2)
+  total          Decimal        @default(0) @db.Decimal(14, 2)
+  amountPaid     Decimal        @default(0) @db.Decimal(14, 2)
+  customizations Json?
+  notes          String?
+  dueDate        DateTime?
+  createdAt      DateTime       @default(now())
+  updatedAt      DateTime       @updatedAt
+
+  hustle   Hustle             @relation(fields: [hustleId], references: [id], onDelete: Cascade)
+  customer Customer?          @relation(fields: [customerId], references: [id], onDelete: SetNull)
   items    OrderItem[]
   events   OrderStatusEvent[]
   payments OrderPayment[]
@@ -367,13 +375,13 @@ model OrderStatusEvent {
 }
 
 model OrderPayment {
-  id        String         @id @default(cuid())
+  id        String        @id @default(cuid())
   orderId   String
-  amount    Decimal        @db.Decimal(14, 2)
+  amount    Decimal       @db.Decimal(14, 2)
   method    PaymentMethod
   reference String?
   note      String?
-  createdAt DateTime       @default(now())
+  createdAt DateTime      @default(now())
 
   order Order @relation(fields: [orderId], references: [id], onDelete: Cascade)
 
@@ -480,3 +488,66 @@ model ActivityLog {
   @@index([type])
   @@index([createdAt])
 }
+
+model Session {
+  id        String   @id
+  expiresAt DateTime
+  token     String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  ipAddress String?
+  userAgent String?
+  userId    String
+  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@unique([token])
+  @@index([userId])
+  @@map("session")
+}
+
+model Account {
+  id                    String    @id
+  accountId             String
+  providerId            String
+  userId                String
+  user                  User      @relation(fields: [userId], references: [id], onDelete: Cascade)
+  accessToken           String?
+  refreshToken          String?
+  idToken               String?
+  accessTokenExpiresAt  DateTime?
+  refreshTokenExpiresAt DateTime?
+  scope                 String?
+  password              String?
+  createdAt             DateTime  @default(now())
+  updatedAt             DateTime  @updatedAt
+
+  @@index([userId])
+  @@map("account")
+}
+
+model Verification {
+  id         String   @id
+  identifier String
+  value      String
+  expiresAt  DateTime
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+
+  @@index([identifier])
+  @@map("verification")
+}
+
+model TwoFactor {
+  id                      String    @id
+  secret                  String
+  backupCodes             String
+  userId                  String
+  user                    User      @relation(fields: [userId], references: [id], onDelete: Cascade)
+  verified                Boolean?  @default(true)
+  failedVerificationCount Int?      @default(0)
+  lockedUntil             DateTime?
+
+  @@index([secret])
+  @@index([userId])
+  @@map("twoFactor")
+}
diff --git a/prisma/seed.ts b/prisma/seed.ts
index 6827c2c..fde4c02 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -1,6 +1,5 @@
 import { PrismaClient, type Prisma } from "@/generated/prisma/client";
 import { PrismaPg } from "@prisma/adapter-pg";
-import bcrypt from "bcryptjs";
 
 const adapter = new PrismaPg({ connectionString: process.env.DATABASE_URL! });
 const prisma = new PrismaClient({ adapter });
@@ -22,16 +21,9 @@ async function main() {
   await prisma.task.deleteMany();
   await prisma.researchNote.deleteMany();
   await prisma.hustle.deleteMany();
-  await prisma.user.deleteMany();
 
-  await prisma.user.create({
-    data: {
-      email: "demo@example.com",
-      name: "Demo Owner",
-      passwordHash: await bcrypt.hash("demo12345", 12),
-    },
-  });
-  console.log("👤 Created owner: demo@example.com / demo12345");
+  // No user is seeded: the owner account is created through the /setup flow
+  // (better-auth). This keeps any default/guessable credential out of the repo.
 
   const hustle = await prisma.hustle.create({
     data: {
@@ -630,7 +622,7 @@ async function main() {
     },
   });
 
-  console.log("✅ Seed complete. Run pnpm dev and sign in with demo@example.com / demo12345");
+  console.log("✅ Seed complete. Run pnpm dev, then create the owner account at /setup.");
 }
 
 main()
diff --git a/src/actions/_helpers.ts b/src/actions/_helpers.ts
index 9e58764..5598d8b 100644
--- a/src/actions/_helpers.ts
+++ b/src/actions/_helpers.ts
@@ -1,9 +1,10 @@
 import { revalidatePath } from "next/cache";
-import { auth } from "@/auth";
+import { headers } from "next/headers";
+import { auth } from "@/lib/auth";
 import { fail, type ActionResult } from "@/lib/result";
 
 export async function requireUser(): Promise<string | null> {
-  const session = await auth();
+  const session = await auth.api.getSession({ headers: await headers() });
   return session?.user?.id ?? null;
 }
 
diff --git a/src/actions/auth-actions.ts b/src/actions/auth-actions.ts
index 592574f..ce0856c 100644
--- a/src/actions/auth-actions.ts
+++ b/src/actions/auth-actions.ts
@@ -1,43 +1,70 @@
 "use server";
 
-import { AuthError } from "next-auth";
-import { signIn, signOut } from "@/auth";
-import { authService } from "@/services/auth-service";
-import { fail, ok, type ActionResult } from "@/lib/result";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+import { auth } from "@/lib/auth";
+import { ok, fail, type ActionResult } from "@/lib/result";
 import { logError, toErrorMessage } from "@/lib/errors";
 import type { ChangePasswordInput, LoginInput, SetupInput } from "@/schemas/auth";
 import { requireUser } from "./_helpers";
 
+// Owner setup (first user only — enforced by the databaseHooks in lib/auth.ts).
+// signUpEmail also signs the new user in, so no separate login call is needed.
 export async function setupOwnerAction(input: SetupInput): Promise<ActionResult<{ id: string }>> {
-  return authService.setupOwner(input);
+  try {
+    const res = await auth.api.signUpEmail({
+      body: { email: input.email.toLowerCase(), password: input.password, name: input.name },
+      headers: await headers(),
+    });
+    return ok({ id: res.user.id });
+  } catch (err) {
+    logError("auth-actions.setupOwnerAction", err);
+    return fail(toErrorMessage(err));
+  }
 }
 
-export async function loginAction(input: LoginInput): Promise<ActionResult<null>> {
+// Password sign-in. If the account has 2FA on, better-auth returns a
+// twoFactorRedirect instead of a session; the form then routes to /login/2fa.
+export async function loginAction(input: LoginInput): Promise<ActionResult<{ totpRequired?: boolean }>> {
   try {
-    await signIn("credentials", {
-      email: input.email,
-      password: input.password,
-      redirect: false,
+    const res = await auth.api.signInEmail({
+      body: { email: input.email.toLowerCase(), password: input.password },
+      headers: await headers(),
     });
-    return ok(null);
-  } catch (err) {
-    if (err instanceof AuthError) {
-      if (err.type === "CredentialsSignin") return fail("Invalid email or password.");
-      return fail("Unable to sign in.");
+    if ((res as { twoFactorRedirect?: boolean })?.twoFactorRedirect) {
+      return ok({ totpRequired: true });
     }
+    return ok({});
+  } catch (err) {
     logError("auth-actions.loginAction", err);
-    return fail(toErrorMessage(err));
+    return fail("Invalid email or password.");
   }
 }
 
 export async function logoutAction(): Promise<void> {
-  await signOut({ redirectTo: "/login" });
+  await auth.api.signOut({ headers: await headers() });
+  redirect("/login");
 }
 
+// Requires the current password (better-auth enforces it) and revokes other
+// sessions so a changed password logs out everywhere.
 export async function changePasswordAction(
   input: ChangePasswordInput,
 ): Promise<ActionResult<{ id: string }>> {
   const userId = await requireUser();
   if (!userId) return fail("Not authenticated.");
-  return authService.changePassword(userId, input);
+  try {
+    await auth.api.changePassword({
+      body: {
+        currentPassword: input.currentPassword,
+        newPassword: input.newPassword,
+        revokeOtherSessions: true,
+      },
+      headers: await headers(),
+    });
+    return ok({ id: userId });
+  } catch (err) {
+    logError("auth-actions.changePasswordAction", err);
+    return fail("Current password is incorrect.");
+  }
 }
diff --git a/src/app/(app)/account/page.tsx b/src/app/(app)/account/page.tsx
index b94fd8e..bdab54c 100644
--- a/src/app/(app)/account/page.tsx
+++ b/src/app/(app)/account/page.tsx
@@ -1,16 +1,18 @@
 import { redirect } from "next/navigation";
+import { headers } from "next/headers";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { PageHeader } from "@/components/shared/page-header";
-import { auth } from "@/auth";
+import { auth } from "@/lib/auth";
 import { authService } from "@/services/auth-service";
 import { ChangePasswordForm } from "./change-password-form";
 import { AiSettingsCard } from "./ai-settings-card";
+import { TotpCard } from "./totp-card";
 import { formatDate } from "@/lib/format";
 
 export const dynamic = "force-dynamic";
 
 export default async function AccountPage() {
-  const session = await auth();
+  const session = await auth.api.getSession({ headers: await headers() });
   if (!session?.user?.id) redirect("/login");
   const user = await authService.getCurrentUser(session.user.id);
   if (!user) redirect("/login");
@@ -39,6 +41,8 @@ export default async function AccountPage() {
         </CardContent>
       </Card>
 
+      <TotpCard initialEnabled={user.twoFactorEnabled ?? false} />
+
       <AiSettingsCard
         provider={user.aiProvider}
         model={user.aiModel}
diff --git a/src/app/(app)/account/totp-card.tsx b/src/app/(app)/account/totp-card.tsx
new file mode 100644
index 0000000..a951205
--- /dev/null
+++ b/src/app/(app)/account/totp-card.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { authClient } from "@/lib/auth-client";
+
+type Stage = "off" | "enrolling" | "backup" | "on";
+
+// better-auth's twoFactor client requires the password to BOTH enable and
+// disable (step-up), so an open session alone cannot change 2FA.
+export function TotpCard({ initialEnabled }: { initialEnabled: boolean }) {
+  const [stage, setStage] = useState<Stage>(initialEnabled ? "on" : "off");
+  const [password, setPassword] = useState("");
+  const [secret, setSecret] = useState("");
+  const [code, setCode] = useState("");
+  const [backupCodes, setBackupCodes] = useState<string[]>([]);
+  const [pending, setPending] = useState(false);
+
+  async function begin() {
+    setPending(true);
+    const { data, error } = await authClient.twoFactor.enable({ password });
+    setPending(false);
+    if (error || !data) {
+      toast.error(error?.message ?? "Failed to start. Check your password.");
+      return;
+    }
+    setPassword("");
+    try {
+      setSecret(new URL(data.totpURI).searchParams.get("secret") ?? "");
+    } catch {
+      setSecret("");
+    }
+    setBackupCodes(data.backupCodes ?? []);
+    setCode("");
+    setStage("enrolling");
+  }
+
+  async function confirm() {
+    setPending(true);
+    const { error } = await authClient.twoFactor.verifyTotp({ code: code.trim() });
+    setPending(false);
+    if (error) {
+      toast.error("Invalid code — try again.");
+      return;
+    }
+    setStage("backup");
+    toast.success("Two-factor authentication enabled.");
+  }
+
+  async function disable() {
+    setPending(true);
+    const { error } = await authClient.twoFactor.disable({ password });
+    setPending(false);
+    if (error) {
+      toast.error(error.message ?? "Wrong password.");
+      return;
+    }
+    setPassword("");
+    setStage("off");
+    toast.success("Two-factor authentication disabled.");
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Two-factor authentication</CardTitle>
+        <CardDescription>
+          Require a time-based code from an authenticator app at sign-in.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {stage === "off" && (
+          <div className="space-y-3 max-w-sm">
+            <div className="space-y-2">
+              <Label>Confirm password to enable</Label>
+              <Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
+            </div>
+            <Button onClick={begin} disabled={pending || !password}>
+              {pending ? "Starting…" : "Enable 2FA"}
+            </Button>
+          </div>
+        )}
+
+        {stage === "enrolling" && (
+          <div className="space-y-3 max-w-sm">
+            <p className="text-sm text-muted-foreground">
+              Add this key to Google Authenticator, Aegis, or 1Password, then enter the code.
+            </p>
+            <p className="text-xs break-all">
+              Manual key: <code className="font-mono">{secret}</code>
+            </p>
+            <div className="space-y-2">
+              <Label>Code from app</Label>
+              <Input inputMode="numeric" placeholder="123456" value={code} onChange={(e) => setCode(e.target.value)} />
+            </div>
+            <div className="flex gap-2">
+              <Button onClick={confirm} disabled={pending || code.trim().length < 6}>
+                {pending ? "Verifying…" : "Verify & enable"}
+              </Button>
+              <Button variant="outline" onClick={() => setStage("off")} disabled={pending}>
+                Cancel
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {stage === "backup" && (
+          <div className="space-y-3">
+            <p className="text-sm font-medium">Save your backup codes</p>
+            <p className="text-xs text-muted-foreground">
+              Each works once if you lose your authenticator. They won’t be shown again.
+            </p>
+            <div className="grid grid-cols-2 gap-2 rounded border p-3 font-mono text-sm max-w-sm">
+              {backupCodes.map((c) => (
+                <span key={c}>{c}</span>
+              ))}
+            </div>
+            <Button onClick={() => setStage("on")}>I’ve saved them</Button>
+          </div>
+        )}
+
+        {stage === "on" && (
+          <div className="space-y-3 max-w-sm">
+            <p className="text-sm text-green-600 dark:text-green-500">2FA is enabled.</p>
+            <div className="space-y-2">
+              <Label>Confirm password to disable</Label>
+              <Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
+            </div>
+            <Button variant="destructive" onClick={disable} disabled={pending || !password}>
+              {pending ? "Disabling…" : "Disable 2FA"}
+            </Button>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx
index 28606db..c841643 100644
--- a/src/app/(app)/layout.tsx
+++ b/src/app/(app)/layout.tsx
@@ -1,8 +1,9 @@
 import { redirect } from "next/navigation";
+import { headers } from "next/headers";
 import { Sidebar } from "@/components/layout/sidebar";
 import { BottomNav } from "@/components/layout/bottom-nav";
 import { authService } from "@/services/auth-service";
-import { auth } from "@/auth";
+import { auth } from "@/lib/auth";
 
 export const dynamic = "force-dynamic";
 
@@ -10,7 +11,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
   if (await authService.needsSetup()) {
     redirect("/setup");
   }
-  const session = await auth();
+  const session = await auth.api.getSession({ headers: await headers() });
   const user = {
     name: session?.user?.name ?? null,
     email: session?.user?.email ?? null,
diff --git a/src/app/(auth)/login/2fa/page.tsx b/src/app/(auth)/login/2fa/page.tsx
new file mode 100644
index 0000000..553360d
--- /dev/null
+++ b/src/app/(auth)/login/2fa/page.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { authClient } from "@/lib/auth-client";
+
+export default function TwoFactorPage() {
+  const router = useRouter();
+  const [code, setCode] = useState("");
+  const [useBackup, setUseBackup] = useState(false);
+  const [pending, setPending] = useState(false);
+
+  async function submit() {
+    setPending(true);
+    const clean = code.trim();
+    const { error } = useBackup
+      ? await authClient.twoFactor.verifyBackupCode({ code: clean })
+      : await authClient.twoFactor.verifyTotp({ code: clean });
+    setPending(false);
+    if (error) {
+      toast.error(useBackup ? "Invalid backup code." : "Invalid authentication code.");
+      return;
+    }
+    router.push("/");
+    router.refresh();
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center space-y-2">
+        <div className="text-3xl font-semibold tracking-tight text-primary">HustleOS</div>
+        <p className="text-sm text-muted-foreground">Enter your two-factor code.</p>
+      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>Two-factor authentication</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="code">{useBackup ? "Backup code" : "Authentication code"}</Label>
+            <Input
+              id="code"
+              inputMode={useBackup ? "text" : "numeric"}
+              autoComplete="one-time-code"
+              autoFocus
+              value={code}
+              onChange={(e) => setCode(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && code.trim() && submit()}
+            />
+          </div>
+          <Button className="w-full" onClick={submit} disabled={pending || !code.trim()}>
+            {pending ? "Verifying…" : "Verify"}
+          </Button>
+          <button
+            type="button"
+            className="text-xs text-muted-foreground underline w-full text-center"
+            onClick={() => setUseBackup((v) => !v)}
+          >
+            {useBackup ? "Use authenticator code instead" : "Use a backup code instead"}
+          </button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/(auth)/login/login-form.tsx b/src/app/(auth)/login/login-form.tsx
index 34a5c33..2e141a1 100644
--- a/src/app/(auth)/login/login-form.tsx
+++ b/src/app/(auth)/login/login-form.tsx
@@ -29,6 +29,10 @@ export function LoginForm() {
       toast.error(res.error);
       return;
     }
+    if (res.data?.totpRequired) {
+      router.push("/login/2fa");
+      return;
+    }
     router.push("/");
     router.refresh();
   }
diff --git a/src/app/api/auth/[...all]/route.ts b/src/app/api/auth/[...all]/route.ts
new file mode 100644
index 0000000..5b67b06
--- /dev/null
+++ b/src/app/api/auth/[...all]/route.ts
@@ -0,0 +1,4 @@
+import { auth } from "@/lib/auth";
+import { toNextJsHandler } from "better-auth/next-js";
+
+export const { GET, POST } = toNextJsHandler(auth);
diff --git a/src/app/api/auth/[...nextauth]/route.ts b/src/app/api/auth/[...nextauth]/route.ts
deleted file mode 100644
index 86c9f3d..0000000
--- a/src/app/api/auth/[...nextauth]/route.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { handlers } from "@/auth";
-
-export const { GET, POST } = handlers;
diff --git a/src/auth/config.ts b/src/auth/config.ts
deleted file mode 100644
index 4eda97f..0000000
--- a/src/auth/config.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { NextAuthConfig } from "next-auth";
-
-export const authConfig = {
-  pages: {
-    signIn: "/login",
-  },
-  session: {
-    strategy: "jwt",
-  },
-  trustHost: true,
-  callbacks: {
-    async jwt({ token, user }) {
-      if (user) {
-        token.sub = user.id;
-        token.name = user.name ?? null;
-        token.email = user.email ?? null;
-      }
-      return token;
-    },
-    async session({ session, token }) {
-      if (token.sub) session.user.id = token.sub;
-      return session;
-    },
-  },
-  providers: [],
-} satisfies NextAuthConfig;
diff --git a/src/auth/index.ts b/src/auth/index.ts
deleted file mode 100644
index 91b5c63..0000000
--- a/src/auth/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import NextAuth from "next-auth";
-import Credentials from "next-auth/providers/credentials";
-import bcrypt from "bcryptjs";
-import { prisma } from "@/lib/prisma";
-import { loginSchema } from "@/schemas/auth";
-import { authConfig } from "./config";
-
-export const { auth, handlers, signIn, signOut } = NextAuth({
-  ...authConfig,
-  providers: [
-    Credentials({
-      credentials: {
-        email: { label: "Email", type: "email" },
-        password: { label: "Password", type: "password" },
-      },
-      async authorize(raw: unknown) {
-        const parsed = loginSchema.safeParse(raw);
-        if (!parsed.success) return null;
-        const user = await prisma.user.findUnique({ where: { email: parsed.data.email } });
-        if (!user) return null;
-        const valid = await bcrypt.compare(parsed.data.password, user.passwordHash);
-        if (!valid) return null;
-        return { id: user.id, email: user.email, name: user.name };
-      },
-    }),
-  ],
-});
diff --git a/src/auth/types.d.ts b/src/auth/types.d.ts
deleted file mode 100644
index 5832ba0..0000000
--- a/src/auth/types.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { DefaultSession } from "next-auth";
-
-declare module "next-auth" {
-  interface Session {
-    user: {
-      id: string;
-    } & DefaultSession["user"];
-  }
-}
diff --git a/src/lib/auth-client.ts b/src/lib/auth-client.ts
new file mode 100644
index 0000000..253d18c
--- /dev/null
+++ b/src/lib/auth-client.ts
@@ -0,0 +1,17 @@
+"use client";
+
+import { createAuthClient } from "better-auth/react";
+import { twoFactorClient } from "better-auth/client/plugins";
+
+export const authClient = createAuthClient({
+  plugins: [
+    twoFactorClient({
+      onTwoFactorRedirect() {
+        // Password accepted, 2FA required -> go collect the code.
+        window.location.href = "/login/2fa";
+      },
+    }),
+  ],
+});
+
+export const { signIn, signOut, useSession, twoFactor } = authClient;
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
new file mode 100644
index 0000000..d08e328
--- /dev/null
+++ b/src/lib/auth.ts
@@ -0,0 +1,48 @@
+import { betterAuth } from "better-auth";
+import { prismaAdapter } from "better-auth/adapters/prisma";
+import { twoFactor, bearer } from "better-auth/plugins";
+import { nextCookies } from "better-auth/next-js";
+import { APIError } from "better-auth/api";
+import { prisma } from "@/lib/prisma";
+import { env } from "@/lib/env";
+
+/**
+ * better-auth is the single auth system (see app-starter-skills standard).
+ * - emailAndPassword: no social providers; single-owner app.
+ * - twoFactor: TOTP + single-use backup codes; secrets encrypted at rest by
+ *   better-auth using the app secret.
+ * - bearer: token auth for native (Flutter) clients hitting the same backend.
+ * - rateLimit: built-in brute-force protection, no hand-rolled lockout.
+ * - databaseHooks: enforce SINGLE OWNER — the first sign-up is allowed, every
+ *   later one is rejected even if it hits the API directly (no open registration).
+ */
+export const auth = betterAuth({
+  database: prismaAdapter(prisma, { provider: "postgresql" }),
+  secret: env.BETTER_AUTH_SECRET ?? env.AUTH_SECRET,
+  baseURL: env.BETTER_AUTH_URL,
+  emailAndPassword: {
+    enabled: true,
+    minPasswordLength: 8,
+  },
+  rateLimit: {
+    enabled: true,
+    window: 60,
+    max: 100,
+  },
+  databaseHooks: {
+    user: {
+      create: {
+        before: async (user) => {
+          const existing = await prisma.user.count();
+          if (existing > 0) {
+            throw new APIError("BAD_REQUEST", {
+              message: "Registration is closed. This app has a single owner.",
+            });
+          }
+          return { data: user };
+        },
+      },
+    },
+  },
+  plugins: [twoFactor(), bearer(), nextCookies()],
+});
diff --git a/src/lib/env.ts b/src/lib/env.ts
index 638a3a1..c837625 100644
--- a/src/lib/env.ts
+++ b/src/lib/env.ts
@@ -13,6 +13,10 @@ const envSchema = z.object({
     .string()
     .optional()
     .transform((v) => v === "true"),
+  // better-auth. BETTER_AUTH_SECRET falls back to AUTH_SECRET so a single secret
+  // works; BETTER_AUTH_URL is the app's own origin (used for cookies/callbacks).
+  BETTER_AUTH_SECRET: z.string().min(1).optional(),
+  BETTER_AUTH_URL: z.url().optional(),
   AI_ENCRYPTION_KEY: z.string().min(1).optional(),
   NODE_ENV: z.enum(["development", "test", "production"]).default("development"),
 });
diff --git a/src/proxy.ts b/src/proxy.ts
index 3670b50..0659dcf 100644
--- a/src/proxy.ts
+++ b/src/proxy.ts
@@ -1,13 +1,12 @@
-import NextAuth from "next-auth";
-import { NextResponse } from "next/server";
-import { authConfig } from "@/auth/config";
-
-const { auth } = NextAuth(authConfig);
+import { NextResponse, type NextRequest } from "next/server";
+import { getSessionCookie } from "better-auth/cookies";
 
 const PUBLIC_PATHS = ["/login", "/setup"];
 const PUBLIC_PREFIXES = ["/api/auth", "/api/public", "/track", "/_next", "/favicon"];
 
-export default auth((req) => {
+// Optimistic cookie check only (edge-safe, no DB call). The real session is
+// still validated server-side in layouts/actions via auth.api.getSession.
+export default function proxy(req: NextRequest) {
   const { nextUrl } = req;
   const path = nextUrl.pathname;
 
@@ -16,7 +15,7 @@ export default auth((req) => {
   }
 
   const isPublic = PUBLIC_PATHS.includes(path);
-  const isLoggedIn = !!req.auth;
+  const isLoggedIn = !!getSessionCookie(req);
 
   if (!isLoggedIn && !isPublic) {
     return NextResponse.redirect(new URL("/login", nextUrl));
@@ -26,7 +25,7 @@ export default auth((req) => {
   }
 
   return NextResponse.next();
-});
+}
 
 export const config = {
   matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\..*).*)"],
diff --git a/src/repositories/user-repository.ts b/src/repositories/user-repository.ts
index c08b9d6..f511400 100644
--- a/src/repositories/user-repository.ts
+++ b/src/repositories/user-repository.ts
@@ -11,12 +11,6 @@ export const userRepository = {
   async findByEmail(email: string) {
     return prisma.user.findUnique({ where: { email } });
   },
-  async create(data: { email: string; name: string; passwordHash: string }) {
-    return prisma.user.create({ data });
-  },
-  async updatePassword(id: string, passwordHash: string) {
-    return prisma.user.update({ where: { id }, data: { passwordHash } });
-  },
   async updateAiSettings(
     id: string,
     data: {
diff --git a/src/services/auth-service.ts b/src/services/auth-service.ts
index 49a42b8..c1593d6 100644
--- a/src/services/auth-service.ts
+++ b/src/services/auth-service.ts
@@ -1,59 +1,13 @@
-import bcrypt from "bcryptjs";
 import { userRepository } from "@/repositories/user-repository";
-import {
-  changePasswordSchema,
-  setupSchema,
-  type ChangePasswordInput,
-  type SetupInput,
-} from "@/schemas/auth";
-import { fail, ok, type ActionResult } from "@/lib/result";
-import { logError, toErrorMessage } from "@/lib/errors";
-
-const BCRYPT_ROUNDS = 12;
 
+// Auth credentials are handled by better-auth (see lib/auth.ts + auth-actions).
+// This service keeps only the app-level reads the UI needs.
 export const authService = {
-  async setupOwner(input: SetupInput): Promise<ActionResult<{ id: string }>> {
-    try {
-      const parsed = setupSchema.parse(input);
-      const count = await userRepository.count();
-      if (count > 0) return fail("Setup has already been completed.");
-      const passwordHash = await bcrypt.hash(parsed.password, BCRYPT_ROUNDS);
-      const user = await userRepository.create({
-        email: parsed.email.toLowerCase(),
-        name: parsed.name,
-        passwordHash,
-      });
-      return ok({ id: user.id });
-    } catch (err) {
-      logError("auth-service.setupOwner", err);
-      return fail(toErrorMessage(err));
-    }
-  },
-
   async needsSetup(): Promise<boolean> {
     const count = await userRepository.count();
     return count === 0;
   },
 
-  async changePassword(
-    userId: string,
-    input: ChangePasswordInput,
-  ): Promise<ActionResult<{ id: string }>> {
-    try {
-      const parsed = changePasswordSchema.parse(input);
-      const user = await userRepository.findById(userId);
-      if (!user) return fail("User not found.");
-      const valid = await bcrypt.compare(parsed.currentPassword, user.passwordHash);
-      if (!valid) return fail("Current password is incorrect.");
-      const passwordHash = await bcrypt.hash(parsed.newPassword, BCRYPT_ROUNDS);
-      await userRepository.updatePassword(userId, passwordHash);
-      return ok({ id: userId });
-    } catch (err) {
-      logError("auth-service.changePassword", err);
-      return fail(toErrorMessage(err));
-    }
-  },
-
   async getCurrentUser(userId: string) {
     return userRepository.findById(userId);
   },