diff --git a/src/app/globals.css b/src/app/globals.css
index ee8f58dac7..703e4c9261 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,6 +1,7 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
+@import "./light.css";
 
 @custom-variant dark (&:is(.dark *));
 
@@ -55,6 +56,19 @@
   --radius-2xl: calc(var(--radius) * 1.8);
   --radius-3xl: calc(var(--radius) * 2.2);
   --radius-4xl: calc(var(--radius) * 2.6);
+
+  /* Slate colors mapped to CSS variables for light mode overrides */
+  --color-slate-950: var(--slate-950, oklch(0.04 0.015 260));
+  --color-slate-900: var(--slate-900, oklch(0.13 0.015 260));
+  --color-slate-800: var(--slate-800, oklch(0.20 0.015 260));
+  --color-slate-700: var(--slate-700, oklch(0.28 0.015 260));
+  --color-slate-600: var(--slate-600, oklch(0.35 0.015 260));
+  --color-slate-500: var(--slate-500, oklch(0.45 0.015 260));
+  --color-slate-400: var(--slate-400, oklch(0.55 0.015 260));
+  --color-slate-300: var(--slate-300, oklch(0.65 0.015 260));
+  --color-slate-200: var(--slate-200, oklch(0.75 0.015 260));
+  --color-slate-100: var(--slate-100, oklch(0.85 0.015 260));
+  --color-slate-50: var(--slate-50, oklch(0.92 0.015 260));
 }
 
 /* ============================================================
@@ -227,4 +241,7 @@ html[data-theme="rose"] {
   html {
     @apply font-sans;
   }
+  button {
+    @apply cursor-pointer;
+  }
 }
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4a8c05a344..abc2862bed 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -25,7 +25,7 @@ export const metadata: Metadata = {
     default: "wacrm",
     template: "%s — wacrm",
   },
-  description: "Self-hostable CRM template for WhatsApp.",
+  description: "Self-hostable Journey Tank WP CRM.",
   robots: {
     index: false,
     follow: false,
diff --git a/src/app/light.css b/src/app/light.css
new file mode 100644
index 0000000000..6d18e455fb
--- /dev/null
+++ b/src/app/light.css
@@ -0,0 +1,50 @@
+/* ============================================================
+ * LIGHT MODE THEME
+ * ============================================================ */
+
+html[data-mode="light"] {
+  --background: oklch(0.99 0.005 260); /* Clean white background */
+  --foreground: oklch(0.12 0.01 260); /* Very dark gray text */
+  --card: oklch(0.96 0.008 260); /* Light gray card */
+  --card-foreground: oklch(0.12 0.01 260);
+  --popover: oklch(0.97 0.008 260);
+  --popover-foreground: oklch(0.12 0.01 260);
+  --primary: oklch(0.526 0.247 293); /* Violet primary */
+  --primary-foreground: oklch(0.99 0.005 260);
+  --primary-hover: oklch(0.45 0.22 293);
+  --primary-soft: oklch(0.526 0.247 293 / 0.08);
+  --primary-soft-2: oklch(0.526 0.247 293 / 0.15);
+  --secondary: oklch(0.90 0.01 260);
+  --secondary-foreground: oklch(0.12 0.01 260);
+  --muted: oklch(0.93 0.008 260);
+  --muted-foreground: oklch(0.45 0.01 260);
+  --accent: oklch(0.90 0.01 260);
+  --accent-foreground: oklch(0.12 0.01 260);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.88 0.01 260);
+  --input: oklch(0.88 0.01 260);
+  --ring: oklch(0.526 0.247 293);
+  --radius: 0.625rem;
+  
+  --sidebar: oklch(0.95 0.008 260); /* Light sidebar */
+  --sidebar-foreground: oklch(0.12 0.01 260);
+  --sidebar-primary: oklch(0.526 0.247 293);
+  --sidebar-primary-foreground: oklch(0.99 0.005 260);
+  --sidebar-accent: oklch(0.90 0.01 260);
+  --sidebar-accent-foreground: oklch(0.12 0.01 260);
+  --sidebar-border: oklch(0.88 0.01 260);
+  --sidebar-ring: oklch(0.526 0.247 293);
+
+  /* Map standard slate colors to light mode equivalents */
+  --slate-950: oklch(0.99 0.005 260); /* Main background */
+  --slate-900: oklch(0.95 0.008 260); /* Sidebar & panels */
+  --slate-800: oklch(0.88 0.01 260);  /* Borders & secondary buttons */
+  --slate-700: oklch(0.78 0.01 260);  /* Inputs & dividers */
+  --slate-600: oklch(0.60 0.01 260);  /* Muted borders/icons */
+  --slate-500: oklch(0.48 0.01 260);  /* Muted labels */
+  --slate-400: oklch(0.38 0.01 260);  /* Subtext */
+  --slate-300: oklch(0.25 0.01 260);  /* Normal text secondary */
+  --slate-200: oklch(0.18 0.01 260);  /* Text heading primary */
+  --slate-100: oklch(0.12 0.01 260);
+  --slate-50: oklch(0.08 0.01 260);
+}
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index c369fb81fd..fbdd510bcb 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -16,7 +16,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer size-4 shrink-0 cursor-pointer rounded-[4px] border border-input bg-card shadow-sm transition-colors",
+        "peer inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[4px] border border-input bg-card shadow-sm transition-colors",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "data-[checked]:border-primary data-[checked]:bg-primary data-[checked]:text-primary-foreground",
diff --git a/src/lib/themes.ts b/src/lib/themes.ts
index 52926939c6..57a7f4b951 100644
--- a/src/lib/themes.ts
+++ b/src/lib/themes.ts
@@ -19,6 +19,7 @@ export const THEME_IDS = [
   "cobalt",
   "amber",
   "rose",
+  "light",
 ] as const;
 
 export type ThemeId = (typeof THEME_IDS)[number];
@@ -97,6 +98,12 @@ export const THEMES: ReadonlyArray<ThemeMeta> = [
     tagline: "Bold and modern — D2C, creator-economy, lifestyle.",
     swatch: "oklch(0.645 0.22 16)",
   },
+  {
+    id: "light",
+    name: "Light Mode",
+    tagline: "Clean, crisp, and high-contrast light theme.",
+    swatch: "oklch(0.95 0.008 260)",
+  },
 ];
 
 export function isThemeId(value: unknown): value is ThemeId {