diff --git a/CLAUDE.md b/CLAUDE.md
index f3cac37..803d4a8 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -61,7 +61,7 @@ make local-db
 # Terminal 2: API server (port 3000)
 pnpm run dev --filter api
 
-# Terminal 3: Web app (port 4000)
+# Terminal 3: Web app (port 5173)
 pnpm run dev --filter web
 
 # Terminal 4 (optional): Database UI (port 4983)
diff --git a/Makefile b/Makefile
index 3d2bab7..4fb41d9 100644
--- a/Makefile
+++ b/Makefile
@@ -4,7 +4,7 @@ local-db:
 
 # Serve production web app
 serve:
-	pnpm run --filter web wrangler:dev --port 4000
+	pnpm run --filter web wrangler:dev
 
 # Build production web app
 build:
diff --git a/apps/marketing/src/styles/global.css b/apps/marketing/src/styles/global.css
index 5c91925..361659b 100644
--- a/apps/marketing/src/styles/global.css
+++ b/apps/marketing/src/styles/global.css
@@ -1,46 +1,6 @@
-@import "tailwindcss";
 @import "@bahar/design-system/globals.css";
 @plugin "@tailwindcss/typography";
 
-@theme {
-  /* Colors - reference imported CSS variables */
-  --color-background: var(--color-background);
-  --color-foreground: var(--color-foreground);
-  --color-card: var(--color-card);
-  --color-card-foreground: var(--color-card-foreground);
-  --color-popover: var(--color-popover);
-  --color-popover-foreground: var(--color-popover-foreground);
-  --color-primary: var(--color-primary);
-  --color-primary-foreground: var(--color-primary-foreground);
-  --color-secondary: var(--color-secondary);
-  --color-secondary-foreground: var(--color-secondary-foreground);
-  --color-muted: var(--color-muted);
-  --color-muted-foreground: var(--color-muted-foreground);
-  --color-accent: var(--color-accent);
-  --color-accent-foreground: var(--color-accent-foreground);
-  --color-destructive: var(--color-destructive);
-  --color-destructive-foreground: var(--color-destructive-foreground);
-  --color-success: var(--color-success);
-  --color-success-foreground: var(--color-success-foreground);
-  --color-border: var(--color-border);
-  --color-input: var(--color-input);
-  --color-ring: var(--color-ring);
-
-  --radius-sm: 0.5rem;
-  --radius-md: 0.625rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-
-  --font-sans:
-    "Inter", "Noto Naskh Arabic", ui-sans-serif, system-ui, sans-serif;
-}
-
-/* RTL support */
-[dir="rtl"] {
-  --font-sans:
-    "Noto Naskh Arabic", "Inter", ui-sans-serif, system-ui, sans-serif;
-}
-
 /* Base styles */
 html {
   scroll-behavior: smooth;
@@ -48,9 +8,9 @@ html {
 }
 
 body {
-  font-family: var(--font-sans);
-  background-color: var(--color-background);
-  color: var(--color-foreground);
+  font-family: var(--font-primary);
+  background-color: var(--background);
+  color: var(--foreground);
   overflow-x: hidden;
 }
 
@@ -105,19 +65,19 @@ body {
 
 /* Prose styling for blog posts */
 .prose {
-  --tw-prose-body: var(--color-foreground);
-  --tw-prose-headings: var(--color-foreground);
-  --tw-prose-links: var(--color-primary);
-  --tw-prose-bold: var(--color-foreground);
-  --tw-prose-counters: var(--color-muted-foreground);
-  --tw-prose-bullets: var(--color-muted-foreground);
-  --tw-prose-hr: var(--color-border);
-  --tw-prose-quotes: var(--color-foreground);
-  --tw-prose-quote-borders: var(--color-border);
-  --tw-prose-captions: var(--color-muted-foreground);
-  --tw-prose-code: var(--color-foreground);
-  --tw-prose-pre-code: var(--color-foreground);
-  --tw-prose-pre-bg: var(--color-muted);
-  --tw-prose-th-borders: var(--color-border);
-  --tw-prose-td-borders: var(--color-border);
+  --tw-prose-body: var(--foreground);
+  --tw-prose-headings: var(--foreground);
+  --tw-prose-links: var(--primary);
+  --tw-prose-bold: var(--foreground);
+  --tw-prose-counters: var(--muted-foreground);
+  --tw-prose-bullets: var(--muted-foreground);
+  --tw-prose-hr: var(--border);
+  --tw-prose-quotes: var(--foreground);
+  --tw-prose-quote-borders: var(--border);
+  --tw-prose-captions: var(--muted-foreground);
+  --tw-prose-code: var(--foreground);
+  --tw-prose-pre-code: var(--foreground);
+  --tw-prose-pre-bg: var(--muted);
+  --tw-prose-th-borders: var(--border);
+  --tw-prose-td-borders: var(--border);
 }
diff --git a/apps/mobile/src/app/_layout.tsx b/apps/mobile/src/app/_layout.tsx
index 62bc4f9..cf38650 100644
--- a/apps/mobile/src/app/_layout.tsx
+++ b/apps/mobile/src/app/_layout.tsx
@@ -26,12 +26,16 @@ import { getLocales } from "expo-localization";
 import { Provider as JotaiProvider } from "jotai";
 import { Appearance, Text, useColorScheme, View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
-import { SafeAreaProvider } from "react-native-safe-area-context";
+import {
+  SafeAreaListener,
+  SafeAreaProvider,
+} from "react-native-safe-area-context";
 import { Toaster } from "sonner-native";
 import { store } from "@/lib/store";
 
 import "@/global.css";
 import { queryClient } from "@/utils/api";
+import { Uniwind } from "uniwind";
 
 const setRootViewBackgroundColor = () => {
   const colorScheme = Appearance.getColorScheme();
@@ -80,41 +84,49 @@ export default function RootLayout() {
       <QueryClientProvider client={queryClient}>
         <GestureHandlerRootView style={{ flex: 1 }}>
           <SafeAreaProvider>
-            <View className="flex-1 bg-background">
-              <ThemeProvider
-                value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
-              >
-                <I18nProvider defaultComponent={DefaultComponent} i18n={i18n}>
-                  <Stack>
-                    <Stack.Protected guard={!authData}>
-                      <Stack.Screen
-                        name="(auth)"
-                        options={{ headerShown: false, animation: "fade" }}
-                      />
-                    </Stack.Protected>
-
-                    <Stack.Protected guard={!!authData}>
-                      <Stack.Screen
-                        name="(search)"
-                        options={{ headerShown: false, animation: "fade" }}
-                      />
-                      <Stack.Screen
-                        name="review"
-                        options={{
-                          headerShown: false,
-                          animation: "slide_from_bottom",
-                          gestureEnabled: true,
-                          gestureDirection: "vertical",
-                        }}
-                      />
-                    </Stack.Protected>
-
-                    <Stack.Screen name="+not-found" />
-                  </Stack>
-                  <StatusBar style="auto" />
-                </I18nProvider>
-              </ThemeProvider>
-            </View>
+            <SafeAreaListener
+              // Enables using p-safe and m-safe class names
+              // with uniwind
+              onChange={({ insets }) => {
+                Uniwind.updateInsets(insets);
+              }}
+            >
+              <View className="flex-1 bg-background">
+                <ThemeProvider
+                  value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
+                >
+                  <I18nProvider defaultComponent={DefaultComponent} i18n={i18n}>
+                    <Stack>
+                      <Stack.Protected guard={!authData}>
+                        <Stack.Screen
+                          name="(auth)"
+                          options={{ headerShown: false, animation: "fade" }}
+                        />
+                      </Stack.Protected>
+
+                      <Stack.Protected guard={!!authData}>
+                        <Stack.Screen
+                          name="(search)"
+                          options={{ headerShown: false, animation: "fade" }}
+                        />
+                        <Stack.Screen
+                          name="review"
+                          options={{
+                            headerShown: false,
+                            animation: "slide_from_bottom",
+                            gestureEnabled: true,
+                            gestureDirection: "vertical",
+                          }}
+                        />
+                      </Stack.Protected>
+
+                      <Stack.Screen name="+not-found" />
+                    </Stack>
+                    <StatusBar style="auto" />
+                  </I18nProvider>
+                </ThemeProvider>
+              </View>
+            </SafeAreaListener>
 
             <Toaster />
           </SafeAreaProvider>
diff --git a/apps/web/README.md b/apps/web/README.md
index a404db8..3910538 100644
--- a/apps/web/README.md
+++ b/apps/web/README.md
@@ -22,7 +22,7 @@ Install packages with `pnpm install`.
 
 Start the dev server with `pnpm dev`.
 
-The web app runs on `http://localhost:4000`.
+The web app runs on `http://localhost:5173`.
 
 ## Building
 
diff --git a/apps/web/index.html b/apps/web/index.html
index 483160c..922ee46 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -30,7 +30,6 @@
   <body>
     <div id="root"></div>
     <script>
-      "use strict";
       const theme = localStorage.getItem("theme");
       const isSystemDark = window.matchMedia(
         "(prefers-color-scheme: dark)"
@@ -40,10 +39,8 @@
 
       if (theme === "dark" || (theme === "system" && isSystemDark)) {
         document.documentElement.classList.add("dark");
-        document.body.style.backgroundColor = "hsl(222.2, 84%, 4.9%)";
       } else {
         document.documentElement.classList.remove("dark");
-        document.body.style.backgroundColor = "hsl(0, 0%, 100%)";
       }
     </script>
 
diff --git a/apps/web/package.json b/apps/web/package.json
index d4d5ba3..3872a15 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -7,7 +7,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "wrangler:dev": "wrangler pages dev"
+    "wrangler:dev": "wrangler pages dev --port 5173"
   },
   "dependencies": {
     "@bahar/db-operations": "workspace:*",
diff --git a/apps/web/src/globals.css b/apps/web/src/globals.css
index f88a8b3..be56bc9 100644
--- a/apps/web/src/globals.css
+++ b/apps/web/src/globals.css
@@ -5,9 +5,12 @@
 
 @layer base {
   * {
-    @apply border-border;
+    @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply font-primary bg-background text-foreground;
+  }
+  html {
+    @apply font-primary;
   }
 }
diff --git a/packages/design-system/colors.css b/packages/design-system/colors.css
index cd87534..c9b8f7f 100644
--- a/packages/design-system/colors.css
+++ b/packages/design-system/colors.css
@@ -1,56 +1,85 @@
 /**
  * Design system colors (oklch)
- * Source of truth: src/colors.ts
  */
 
 :root {
-  --color-background: oklch(100% 0 0);
-  --color-foreground: oklch(14% 0.03 265);
-  --color-card: oklch(100% 0 0);
-  --color-card-foreground: oklch(14% 0.03 265);
-  --color-popover: oklch(100% 0 0);
-  --color-popover-foreground: oklch(14% 0.03 265);
-  --color-primary: oklch(56% 0.2 263);
-  --color-primary-foreground: oklch(98.5% 0.01 248);
-  --color-secondary: oklch(97% 0.014 248);
-  --color-secondary-foreground: oklch(21% 0.03 265);
-  --color-muted: oklch(97% 0.014 248);
-  --color-muted-foreground: oklch(52% 0.04 255);
-  --color-accent: oklch(97% 0.014 248);
-  --color-accent-foreground: oklch(21% 0.03 265);
-  --color-destructive: oklch(64% 0.21 27);
-  --color-destructive-foreground: oklch(98.5% 0.01 248);
-  --color-success: oklch(52% 0.14 151);
-  --color-success-foreground: oklch(98.5% 0.01 248);
-  --color-warning: oklch(69% 0.18 41);
-  --color-warning-foreground: oklch(21% 0.03 265);
-  --color-border: oklch(92% 0.02 253);
-  --color-input: oklch(92% 0.02 253);
-  --color-ring: oklch(56% 0.2 263);
+  --background: oklch(100% 0 0);
+  --foreground: oklch(14% 0.03 265);
+  --card: oklch(100% 0 0);
+  --card-foreground: oklch(14% 0.03 265);
+  --popover: oklch(100% 0 0);
+  --popover-foreground: oklch(14% 0.03 265);
+  --primary: oklch(56% 0.2 263);
+  --primary-foreground: oklch(98.5% 0.01 248);
+  --secondary: oklch(97% 0.014 248);
+  --secondary-foreground: oklch(21% 0.03 265);
+  --muted: oklch(97% 0.014 248);
+  --muted-foreground: oklch(52% 0.04 255);
+  --accent: oklch(97% 0.014 248);
+  --accent-foreground: oklch(21% 0.03 265);
+  --destructive: oklch(64% 0.21 27);
+  --destructive-foreground: oklch(98.5% 0.01 248);
+  --border: oklch(92% 0.02 253);
+  --input: oklch(92% 0.02 253);
+  --ring: oklch(56% 0.2 263);
+  --chart-1: oklch(0.8241 0.1251 84.4866);
+  --chart-2: oklch(0.8006 0.1116 203.6044);
+  --chart-3: oklch(0.4198 0.1693 266.7798);
+  --chart-4: oklch(0.9214 0.0762 125.5777);
+  --chart-5: oklch(0.9151 0.1032 116.1913);
+  --sidebar: oklch(0.9886 0 0);
+  --sidebar-foreground: oklch(0.26 0.04 259);
+  --sidebar-primary: oklch(0.33 0.06 259);
+  --sidebar-primary-foreground: oklch(0.9886 0 0);
+  --sidebar-accent: oklch(0.96 0.008 259);
+  --sidebar-accent-foreground: oklch(0.3261 0 0);
+  --sidebar-border: oklch(0.92 0.025 259);
+  --sidebar-ring: oklch(0.7716 0 0);
+
+  /* Extra colors */
+  --success: oklch(52% 0.14 151);
+  --success-foreground: oklch(98.5% 0.01 248);
+  --warning: oklch(69% 0.18 41);
+  --warning-foreground: oklch(21% 0.03 265);
 }
 
 .dark {
-  --color-background: oklch(14% 0.03 265);
-  --color-foreground: oklch(98.5% 0.01 248);
-  --color-card: oklch(14% 0.03 265);
-  --color-card-foreground: oklch(98.5% 0.01 248);
-  --color-popover: oklch(14% 0.03 265);
-  --color-popover-foreground: oklch(98.5% 0.01 248);
-  --color-primary: oklch(64% 0.2 260);
-  --color-primary-foreground: oklch(21% 0.03 265);
-  --color-secondary: oklch(25% 0.04 260);
-  --color-secondary-foreground: oklch(98.5% 0.01 248);
-  --color-muted: oklch(25% 0.04 260);
-  --color-muted-foreground: oklch(70% 0.035 255);
-  --color-accent: oklch(25% 0.04 260);
-  --color-accent-foreground: oklch(98.5% 0.01 248);
-  --color-destructive: oklch(40% 0.14 27);
-  --color-destructive-foreground: oklch(98.5% 0.01 248);
-  --color-success: oklch(60% 0.15 151);
-  --color-success-foreground: oklch(21% 0.03 265);
-  --color-warning: oklch(74% 0.18 56);
-  --color-warning-foreground: oklch(21% 0.03 265);
-  --color-border: oklch(25% 0.04 260);
-  --color-input: oklch(25% 0.04 260);
-  --color-ring: oklch(52% 0.19 267);
+  --background: oklch(14% 0.03 265);
+  --foreground: oklch(98.5% 0.01 248);
+  --card: oklch(14% 0.03 265);
+  --card-foreground: oklch(98.5% 0.01 248);
+  --popover: oklch(14% 0.03 265);
+  --popover-foreground: oklch(98.5% 0.01 248);
+  --primary: oklch(64% 0.2 260);
+  --primary-foreground: oklch(21% 0.03 265);
+  --secondary: oklch(25% 0.04 260);
+  --secondary-foreground: oklch(98.5% 0.01 248);
+  --muted: oklch(25% 0.04 260);
+  --muted-foreground: oklch(70% 0.035 255);
+  --accent: oklch(25% 0.04 260);
+  --accent-foreground: oklch(98.5% 0.01 248);
+  --destructive: oklch(40% 0.14 27);
+  --destructive-foreground: oklch(98.5% 0.01 248);
+  --border: oklch(25% 0.04 260);
+  --input: oklch(25% 0.04 260);
+  --ring: oklch(52% 0.19 267);
+  --chart-1: oklch(0.5292 0.1931 262.1292);
+  --chart-2: oklch(0.6983 0.1337 165.4626);
+  --chart-3: oklch(0.7232 0.15 60.6307);
+  --chart-4: oklch(0.6192 0.2037 312.7283);
+  --chart-5: oklch(0.6123 0.2093 6.3856);
+  --sidebar: oklch(0.18 0.025 260);
+  --sidebar-foreground: oklch(0.96 0.015 260);
+  --sidebar-primary: oklch(0.4878 0.217 264.3876);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.24 0.03 260);
+  --sidebar-accent-foreground: oklch(0.9676 0.0013 286.3752);
+  --sidebar-border: oklch(0.24 0.03 260);
+  --sidebar-ring: oklch(0.8709 0.0055 286.2853);
+
+  /* Extra colors */
+  --success: oklch(60% 0.15 151);
+  --success-foreground: oklch(21% 0.03 265);
+  --warning: oklch(74% 0.18 56);
+  --warning-foreground: oklch(21% 0.03 265);
 }
diff --git a/packages/design-system/globals.css b/packages/design-system/globals.css
index 06c89b2..f280688 100644
--- a/packages/design-system/globals.css
+++ b/packages/design-system/globals.css
@@ -6,30 +6,40 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme inline {
+  --radius: 0.75rem;
+
   /* Colors - reference CSS variables */
-  --color-background: var(--color-background);
-  --color-foreground: var(--color-foreground);
-  --color-card: var(--color-card);
-  --color-card-foreground: var(--color-card-foreground);
-  --color-popover: var(--color-popover);
-  --color-popover-foreground: var(--color-popover-foreground);
-  --color-primary: var(--color-primary);
-  --color-primary-foreground: var(--color-primary-foreground);
-  --color-secondary: var(--color-secondary);
-  --color-secondary-foreground: var(--color-secondary-foreground);
-  --color-muted: var(--color-muted);
-  --color-muted-foreground: var(--color-muted-foreground);
-  --color-accent: var(--color-accent);
-  --color-accent-foreground: var(--color-accent-foreground);
-  --color-destructive: var(--color-destructive);
-  --color-destructive-foreground: var(--color-destructive-foreground);
-  --color-success: var(--color-success);
-  --color-success-foreground: var(--color-success-foreground);
-  --color-warning: var(--color-warning);
-  --color-warning-foreground: var(--color-warning-foreground);
-  --color-border: var(--color-border);
-  --color-input: var(--color-input);
-  --color-ring: var(--color-ring);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
 
   /* Border radius */
   --radius-sm: calc(var(--radius) - 4px);
@@ -78,7 +88,3 @@
     height: 0;
   }
 }
-
-:root {
-  --radius: 0.75rem;
-}