diff --git a/src/base.css b/src/base.css
new file mode 100644
index 0000000..30953ed
--- /dev/null
+++ b/src/base.css
@@ -0,0 +1,41 @@
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@layer base {
+  [data-debug-wrapper="true"] {
+    display: contents !important;
+  }
+
+  [data-debug-wrapper="true"] > * {
+    margin-left: inherit;
+    margin-right: inherit;
+    margin-top: inherit;
+    margin-bottom: inherit;
+    padding-left: inherit;
+    padding-right: inherit;
+    padding-top: inherit;
+    padding-bottom: inherit;
+    column-gap: inherit;
+    row-gap: inherit;
+    gap: inherit;
+    border-left-width: inherit;
+    border-right-width: inherit;
+    border-top-width: inherit;
+    border-bottom-width: inherit;
+    border-left-style: inherit;
+    border-right-style: inherit;
+    border-top-style: inherit;
+    border-bottom-style: inherit;
+    border-left-color: inherit;
+    border-right-color: inherit;
+    border-top-color: inherit;
+    border-bottom-color: inherit;
+  }
+}
diff --git a/src/components.css b/src/components.css
new file mode 100644
index 0000000..93be360
--- /dev/null
+++ b/src/components.css
@@ -0,0 +1,52 @@
+@layer components {
+  .btn {
+    @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors
+      focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+      disabled:pointer-events-none disabled:opacity-50
+      [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0;
+  }
+
+  .btn-primary {
+    @apply bg-primary text-primary-foreground shadow hover:bg-primary/90;
+  }
+
+  .btn-secondary {
+    @apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80;
+  }
+
+  .btn-ghost {
+    @apply hover:bg-accent hover:text-accent-foreground;
+  }
+
+  .btn-outline {
+    @apply border border-input shadow-sm hover:bg-accent hover:text-accent-foreground;
+  }
+
+  .btn-accent {
+    @apply bg-accent text-accent-foreground shadow hover:bg-accent/90;
+  }
+
+  .btn-destructive {
+    @apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90;
+  }
+
+  .btn-link {
+    @apply text-primary underline-offset-4 hover:underline;
+  }
+
+  .btn-sm {
+    @apply h-8 rounded-md px-3 text-xs;
+  }
+
+  .btn-md {
+    @apply h-9 px-4 py-2;
+  }
+
+  .btn-lg {
+    @apply h-10 rounded-md px-8;
+  }
+
+  .btn-icon {
+    @apply h-9 w-9;
+  }
+}
diff --git a/src/index.css b/src/index.css
index ac0ece7..d5830f2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -20,213 +20,8 @@ code {
     monospace;
 }
 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 280 47% 27%;
-    --card: 0 0% 100%;
-    --card-foreground: 280 47% 27%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 280 47% 27%;
-    --primary: 280 47% 27%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 268 33% 89%;
-    --secondary-foreground: 280 47% 27%;
-    --muted: 268 43% 95%;
-    --muted-foreground: 268 35% 47%;
-    --accent: 17 100% 73%;
-    --accent-foreground: 280 47% 27%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 268 33% 89%;
-    --input: 268 33% 89%;
-    --ring: 268 35% 47%;
-    --chart-1: 268 36% 46%;
-    --chart-2: 17 100% 73%;
-    --chart-3: 268 33% 89%;
-    --chart-4: 280 44% 29%;
-    --chart-5: 268 35% 47%;
-    --radius: 0.5rem;
 
-    /* =========================
-     Brand Colors
-     ========================= */
-    --brand-dark-lavender: 267 47% 29%;
-    --brand-purple: 256 35% 47%;
-    --brand-lavender: 262 46% 80%;
-    --brand-light-lavender: 256 32% 88%;
-    --brand-white: 0 0% 100%;
 
-    --brand-dark-orange: 13 100% 42%;
-    --brand-orange: 24 86% 55%;
-    --brand-light-orange: 24 100% 67%;
-
-    --brand-pink: 324 55% 60%;
-    --dusty-pink: 323 39% 52%;
-    --dark-rose: 324 98% 32%;
-
-    /* 
-    ==========================
-      Color Patch 
-    ==========================
-     */
-
-    --blue-linkedin: #0a66c2;
-    --blue-facebook: #1877f2;
-    --blue-twitter: #1da1f2;
-    --purple-ink: #422268;
-    --purple-deep: #48286e;
-    --purple-muted: #533a82;
-    --purple-plum: #553d8a;
-    --purple-soft: #5a4290;
-    --purple-amethyst: #644c9f;
-    --purple-lilac: #664ea2;
-    --purple-lavender: #664fa3;
-    --purple-electric: #865edf;
-    --slate-dark: #3d405b;
-    --slate-muted: #6b708d;
-    --slate-600: #6b7280;
-    --slate-400: #9ca3af;
-    --slate-dark: #3d405b;
-    --slate-muted: #6b708d;
-    --slate-600: #6b7280;
-    --slate-400: #9ca3af;
-    --green-success: #4caf50;
-    --green-sage: #5a8f72;
-    --green-muted: #66927e;
-    --green-soft: #6a9680;
-    --green-eucalyptus: #6a9a83;
-    --green-fern: #6da085;
-    --green-mint: #6fa087;
-    --green-pastel: #6fa188;
-    --green-light: #81b29a;
-    --green-bg: #e8f5e9;
-    --orange-rust: #d16b54;
-    --orange-soft: #e07a5f;
-    --orange-peach: #e88a63;
-    --orange-sand: #e88d66;
-    --orange-apricot: #ff8c5a;
-    --orange-coral: #ff8c64;
-    --orange-light: #ff9e77;
-    --orange-500: #ea580c;
-    --orange-400: #fb923c;
-    --gold-soft: #e8bf7a;
-    --gold-warm: #f2cc8f;
-    --gold-soft: #e8bf7a;
-    --gold-warm: #f2cc8f;
-    --red-instagram: #e4405f;
-    --red-soft: #ffebee;
-    --lavender-100: #e8e0f5;
-    --lavender-200: #eeebf4;
-    --lavender-300: #f1eef9;
-    --lavender-400: #f9f5ff;
-    --lavender-500: #f8f7fb;
-    --lavender-600: #f9f7fc;
-    --lavender-700: #f9f8fb;
-    --lavender-800: #eaedf4;
-    --neutral-50: #fafafa;
-    --neutral-100: #f9fafb;
-    --neutral-200: #fdfcf8;
-    --neutral-300: #eae0d5;
-    --neutral-400: #c4bed8;
-    --neutral-500: #c5b4e3;
-    --neutral-600: #c5bfd9;
-    --neutral-700: #dcd7ea;
-    --neutral-800: #ddd8eb;
-    --neutral-900: #ffffff;
-  }
-  .dark {
-    --background: var(--brand-dark-lavender);
-    --foreground: var(--brand-light-lavender);
-    --card: var(--brand-purple);
-    --card-foreground: var(--brand-light-lavender);
-    --popover: var(--brand-purple);
-    --popover-foreground: var(--brand-light-lavender);
-    --primary: var(--brand-light-lavender);
-    --primary-foreground: var(--brand-dark-lavender);
-    --secondary: var(--brand-purple);
-    --secondary-foreground: var(--brand-light-lavender);
-    --muted: var(--brand-purple);
-    --muted-foreground: var(--brand-light-lavender);
-    --accent: var(--brand-light-lavender);
-    --accent-foreground: var(--brand-light-lavender);
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: var(--brand-light-lavender);
-    --border: var(--brand-purple);
-    --input: var(--brand-purple);
-    --ring: var(--brand-light-lavender);
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-@layer base {
-  [data-debug-wrapper="true"] {
-    display: contents !important;
-  }
-
-  [data-debug-wrapper="true"] > * {
-    margin-left: inherit;
-    margin-right: inherit;
-    margin-top: inherit;
-    margin-bottom: inherit;
-    padding-left: inherit;
-    padding-right: inherit;
-    padding-top: inherit;
-    padding-bottom: inherit;
-    column-gap: inherit;
-    row-gap: inherit;
-    gap: inherit;
-    border-left-width: inherit;
-    border-right-width: inherit;
-    border-top-width: inherit;
-    border-bottom-width: inherit;
-    border-left-style: inherit;
-    border-right-style: inherit;
-    border-top-style: inherit;
-    border-bottom-style: inherit;
-    border-left-color: inherit;
-    border-right-color: inherit;
-    border-top-color: inherit;
-    border-bottom-color: inherit;
-  }
-}
-
-@layer utilities {
-  @supports selector(::-webkit-scrollbar) {
-    .scrollbar-dashboard::-webkit-scrollbar {
-      width: 2px;
-    }
-
-    .scrollbar-dashboard::-webkit-scrollbar-thumb {
-      background-color: #ddd8eb;
-      border-radius: 9999px;
-    }
-    .scrollbar-x-dashboard::-webkit-scrollbar:horizontal {
-      height: 2px;
-    }
-
-    .scrollbar-x-dashboard::-webkit-scrollbar-thumb:horizontal {
-      background-color: #ddd8eb;
-      border-radius: 9999px;
-    }
-    .hide-scrollbar-x::-webkit-scrollbar:horizontal {
-      height: 0px;
-    }
-  }
-}
 
 /* 
 =========================
diff --git a/src/theme.css b/src/theme.css
new file mode 100644
index 0000000..8622685
--- /dev/null
+++ b/src/theme.css
@@ -0,0 +1,225 @@
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 280 47% 27%;
+    --card: 0 0% 100%;
+    --card-foreground: 280 47% 27%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 280 47% 27%;
+    --primary: 280 47% 27%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 268 33% 89%;
+    --secondary-foreground: 280 47% 27%;
+    --muted: 268 43% 95%;
+    --muted-foreground: 268 35% 47%;
+    --accent: var(--brand-orange);
+    --accent-foreground: 280 47% 27%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 268 33% 89%;
+    --input: 268 33% 89%;
+    --ring: 268 35% 47%;
+    --chart-1: 268 36% 46%;
+    --chart-2: 17 100% 73%;
+    --chart-3: 268 33% 89%;
+    --chart-4: 280 44% 29%;
+    --chart-5: 268 35% 47%;
+    --radius: 0.5rem;
+
+    /* =========================
+     Brand Colors
+     ========================= */
+    --brand-dark-lavender: 267 47% 29%;
+    --brand-purple: 256 35% 47%;
+    --brand-lavender: 262 46% 80%;
+    --brand-light-lavender: 256 32% 88%;
+    --brand-white: 0 0% 100%;
+
+    --brand-dark-orange: 13 100% 42%;
+    --brand-orange: 24 86% 55%;
+    --brand-light-orange: 24 100% 67%;
+
+    --brand-pink: 324 55% 60%;
+    --dusty-pink: 323 39% 52%;
+    --dark-rose: 324 98% 32%;
+
+    /* 
+    ==========================
+      Color Patch 
+    ==========================
+     */
+
+    --blue-linkedin: #0a66c2;
+    --blue-facebook: #1877f2;
+    --blue-twitter: #1da1f2;
+    --purple-ink: #422268;
+    --purple-deep: #48286e;
+    --purple-muted: #533a82;
+    --purple-plum: #553d8a;
+    --purple-soft: #5a4290;
+    --purple-amethyst: #644c9f;
+    --purple-lilac: #664ea2;
+    --purple-lavender: #664fa3;
+    --purple-electric: #865edf;
+    --slate-dark: #3d405b;
+    --slate-muted: #6b708d;
+    --slate-600: #6b7280;
+    --slate-400: #9ca3af;
+    --slate-dark: #3d405b;
+    --slate-muted: #6b708d;
+    --slate-600: #6b7280;
+    --slate-400: #9ca3af;
+    --green-success: #4caf50;
+    --green-sage: #5a8f72;
+    --green-muted: #66927e;
+    --green-soft: #6a9680;
+    --green-eucalyptus: #6a9a83;
+    --green-fern: #6da085;
+    --green-mint: #6fa087;
+    --green-pastel: #6fa188;
+    --green-light: #81b29a;
+    --green-bg: #e8f5e9;
+    --orange-rust: #d16b54;
+    --orange-soft: #e07a5f;
+    --orange-peach: #e88a63;
+    --orange-sand: #e88d66;
+    --orange-apricot: #ff8c5a;
+    --orange-coral: #ff8c64;
+    --orange-light: #ff9e77;
+    --orange-500: #ea580c;
+    --orange-400: #fb923c;
+    --gold-soft: #e8bf7a;
+    --gold-warm: #f2cc8f;
+    --gold-soft: #e8bf7a;
+    --gold-warm: #f2cc8f;
+    --red-instagram: #e4405f;
+    --red-soft: #ffebee;
+    --lavender-100: #e8e0f5;
+    --lavender-200: #eeebf4;
+    --lavender-300: #f1eef9;
+    --lavender-400: #f9f5ff;
+    --lavender-500: #f8f7fb;
+    --lavender-600: #f9f7fc;
+    --lavender-700: #f9f8fb;
+    --lavender-800: #eaedf4;
+    --neutral-50: #fafafa;
+    --neutral-100: #f9fafb;
+    --neutral-200: #fdfcf8;
+    --neutral-300: #eae0d5;
+    --neutral-400: #c4bed8;
+    --neutral-500: #c5b4e3;
+    --neutral-600: #c5bfd9;
+    --neutral-700: #dcd7ea;
+    --neutral-800: #ddd8eb;
+    --neutral-900: #ffffff;
+  }
+  .dark {
+    --background: 246 28% 8%;
+    --foreground: 255 30% 92%;
+
+    --card: 248 26% 11%;
+    --card-foreground: 255 30% 92%;
+
+    --popover: 248 26% 12%;
+    --popover-foreground: 255 30% 92%;
+
+    --primary: 262 70% 72%;
+    --primary-foreground: 246 28% 10%;
+
+    --secondary: 262 22% 18%;
+    --secondary-foreground: 255 30% 92%;
+
+    --muted: 252 18% 15%;
+    --muted-foreground: var(--brand-lavender);
+
+    --accent: var(--brand-light-orange);
+    --accent-foreground: 246 28% 10%;
+
+    --destructive: 0 78% 56%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 255 14% 22%;
+    --input: 255 14% 20%;
+    --ring: 262 70% 72%;
+
+    /* charts (tuned for dark backgrounds) */
+    --chart-1: 262 70% 72%;
+    --chart-2: var(--dark-rose);
+    --chart-3: 168 48% 52%;
+    --chart-4: 286 64% 70%;
+    --chart-5: 210 70% 66%;
+
+    --radius: 0.5rem;
+
+    /* -------- Purples (Primary UI) -------- */
+    --purple-ink: #422268; /* deepest background */
+    --purple-ink: hsl(var(--brand-light-lavender)); /* deepest background */
+    --purple-deep: #24153a; /* app shell */
+    --purple-muted: #34204f; /* panels */
+    --purple-plum: #3f2760;
+    --purple-soft: #4b3374;
+    --purple-amethyst: #5c45a0;
+    --purple-lilac: #6a55b8;
+    --purple-lavender: #664fa3;
+    --purple-electric: #9b7cff; /* accents / focus */
+
+    /* -------- Slate / Text Neutrals -------- */
+    --slate-dark: #0f1020; /* page background */
+    --slate-muted: #2b2f44; /* borders / dividers */
+    --slate-600: #8b90a8; /* secondary text */
+    --slate-400: #c7cad6; /* primary text */
+
+    /* -------- Greens (Success / Calm) -------- */
+    --green-success: #3ddc84;
+    --green-sage: #4fa38a;
+    --green-muted: #5fb39a;
+    --green-soft: #6fc4aa;
+    --green-eucalyptus: #7dd3b0;
+    --green-fern: #8be0bc;
+    --green-mint: #66a38b;
+    --green-pastel: #a6ecd1;
+    --green-light: #5e8374;
+    --green-bg: #0f2a1e;
+
+    /* -------- Oranges (Warnings / Energy) -------- */
+    --orange-rust: #b4533c;
+    --orange-soft: #c8654c;
+    --orange-peach: #d97757;
+    --orange-sand: #e08966;
+    --orange-apricot: #ff9f6e;
+    --orange-coral: #ff8a75;
+    --orange-light: #ffab91;
+    --orange-500: #f97316;
+    --orange-400: #fb923c;
+
+    /* -------- Golds -------- */
+    --gold-soft: #e3c07a;
+    --gold-warm: #f5d89c;
+
+    /* -------- Reds -------- */
+
+    --red-soft: #3a141c;
+
+    /* -------- Lavender UI Layers -------- */
+    --lavender-100: #1c142c;
+    --lavender-200: #241a38;
+    --lavender-300: #2c2145;
+    --lavender-400: #342952;
+    --lavender-500: #211c35;
+    --lavender-600: #45396e;
+    --lavender-700: #4e417d;
+    --lavender-800: #584a8c;
+
+    /* -------- Neutral Surfaces -------- */
+    --neutral-50: #0b0b10; /* deepest bg */
+    --neutral-100: #12121a;
+    --neutral-200: #1a1a24;
+    --neutral-300: #232330;
+    --neutral-400: #2f2f40;
+    --neutral-500: #3b3b52;
+    --neutral-600: #515170;
+    --neutral-700: #77779a;
+    --neutral-800: var(--lavender-300); /* lightest bg */
+    --neutral-900: #f4f4ff; /* highest contrast text */
+  }
+}
diff --git a/src/utilities.css b/src/utilities.css
new file mode 100644
index 0000000..e8925d0
--- /dev/null
+++ b/src/utilities.css
@@ -0,0 +1,60 @@
+@layer utilities {
+  @supports selector(::-webkit-scrollbar) {
+    .scrollbar-dashboard::-webkit-scrollbar {
+      width: 2px;
+    }
+
+    .scrollbar-dashboard::-webkit-scrollbar-thumb {
+      background-color: #ddd8eb;
+      border-radius: 9999px;
+    }
+    .scrollbar-x-dashboard::-webkit-scrollbar:horizontal {
+      height: 2px;
+    }
+
+    .scrollbar-x-dashboard::-webkit-scrollbar-thumb:horizontal {
+      background-color: #ddd8eb;
+      border-radius: 9999px;
+    }
+    .hide-scrollbar-x::-webkit-scrollbar:horizontal {
+      height: 0px;
+    }
+  }
+  .ui-checkbox {
+    @apply appearance-none
+           w-5 h-5
+           rounded
+           border-2 border-[var(--neutral-800)]
+           bg-[hsl(var(--background))]
+           cursor-pointer
+           inline-grid place-content-center;
+  }
+
+  /* checked */
+  .ui-checkbox:checked {
+    @apply bg-brand-purple
+           border-brand-purple;
+  }
+
+  /* checkmark */
+  .ui-checkbox::after {
+    content: "";
+    @apply w-2.5 h-2.5 scale-0 transition-transform bg-white;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
+  }
+
+  .ui-checkbox:checked::after {
+    @apply scale-100;
+  }
+
+  /* focus */
+  .ui-checkbox:focus-visible {
+    @apply outline-none ring-2 ring-brand-purple
+           ring-offset-2 ring-offset-[hsl(var(--background))];
+  }
+
+  /* disabled */
+  .ui-checkbox:disabled {
+    @apply opacity-50 cursor-not-allowed;
+  }
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 7aecb23..c8d39f3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,7 +3,9 @@ module.exports = {
 	darkMode: ["class"],
 	content: [
 		"./src/**/*.{js,jsx,ts,tsx}",
-		"./public/index.html"
+		"./public/index.html",
+		"./src/index.css"
+
 	],
 	theme: {
 		extend: {