diff --git a/src/assets/index.css b/src/assets/index.css
index 118bb00..a63129c 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -1,67 +1,115 @@
 @import "tailwindcss";
 
 @layer base {
-  :root {
-    --color-background: hsl(32 92% 87%); /* bg0 */
-    --color-foreground: hsl(40 13% 23%); /* fg */
+  /* :root { */
+  /*   /* gruvbox light theme */ */
+  /*   --color-background: hsl(32 92% 87%); /* bg0 */ */
+  /*   --color-foreground: hsl(40 13% 23%); /* fg */ */
+  /**/
+  /*   --color-card: hsl(39 59% 88%); /* bg1 */ */
+  /*   --color-card-foreground: hsl(40 13% 23%); /* fg */ */
+  /**/
+  /*   --color-popover: hsl(39 59% 88%); /* bg1 */ */
+  /*   --color-popover-foreground: hsl(40 13% 23%); /* fg */ */
+  /**/
+  /*   --color-primary: hsl(0 100% 31%); /* red */ */
+  /*   --color-primary-foreground: hsl(40 92% 88%); /* bg */ */
+  /**/
+  /*   --color-secondary: hsl(39 46% 81%); /* bg2 */ */
+  /*   --color-secondary-foreground: hsl(40 13% 23%); /* fg */ */
+  /**/
+  /*   --color-muted: hsl(37 29% 73%); /* bg3 */ */
+  /*   --color-muted-foreground: hsl(40 4% 36%); /* gray */ */
+  /**/
+  /*   --color-accent: hsl(40 71% 49%); /* yellow */ */
+  /*   --color-accent-foreground: hsl(0 0% 16%); */
+  /**/
+  /*   --color-destructive: hsl(0 76% 46%); /* bright_red */ */
+  /*   --color-destructive-foreground: hsl(40 92% 88%); /* bg */ */
+  /**/
+  /*   --color-border: hsl(33 14% 59%); /* fg4 */ */
+  /*   --color-input: hsl(33 14% 59%); /* fg4 */ */
+  /*   --color-ring: hsl(0 100% 31%); /* red */ */
+  /**/
+  /*   --radius: 0.5rem; */
+  /* } */
+ 
+  /* .dark { */
+  /*   /* gruvbox dark theme */ */
+  /*   --color-background: hsl(0 0% 16%); /* bg0 */ */
+  /*   --color-foreground: hsl(40 92% 88%); /* fg */ */
+  /**/
+  /*   --color-card: hsl(0 7% 23%); /* bg1 */ */
+  /*   --color-card-foreground: hsl(40 92% 88%); /* fg */ */
+  /**/
+  /*   --color-popover: hsl(0 7% 23%); /* bg1 */ */
+  /*   --color-popover-foreground: hsl(40 92% 88%); /* fg */ */
+  /**/
+  /*   --color-primary: hsl(6 93% 59%); /* red */ */
+  /*   --color-primary-foreground: hsl(0 0% 16%); /* bg */ */
+  /**/
+  /*   --color-secondary: hsl(0 5% 29%); /* bg2 */ */
+  /*   --color-secondary-foreground: hsl(40 92% 88%); /* fg */ */
+  /**/
+  /*   --color-muted: hsl(20 6% 36%); /* bg3 */ */
+  /*   --color-muted-foreground: hsl(33 14% 59%); /* gray */ */
+  /**/
+  /*   --color-accent: hsl(42 95% 58%); /* yellow */ */
+  /*   --color-accent-foreground: hsl(0 0% 16%); */
+  /**/
+  /*   --color-destructive: hsl(6 93% 59%); /* bright_red */ */
+  /*   --color-destructive-foreground: hsl(40 92% 88%); /* bg */ */
+  /**/
+  /*   --color-border: hsl(24 10% 51%); /* fg4 */ */
+  /*   --color-input: hsl(24 10% 51%); /* fg4 */ */
+  /*   --color-ring: hsl(6 93% 59%); /* red */ */
+  /* } */
+:root {
+  /* Catppuccin Macchiato */
+  --color-background: #24273a;
+  --color-foreground: #cad3f5;
+  --color-card: #1e2030;
+  --color-card-foreground: #cad3f5;
+  --color-popover: #1e2030;
+  --color-popover-foreground: #cad3f5;
+  --color-primary: #8aadf4;
+  --color-primary-foreground: #24273a;
+  --color-secondary: #363a4f;
+  --color-secondary-foreground: #cad3f5;
+  --color-muted: #363a4f;
+  --color-muted-foreground: #a5adcb;
+  --color-accent: #f4dbd6;
+  --color-accent-foreground: #24273a;
+  --color-destructive: #ed8796;
+  --color-destructive-foreground: #24273a;
+  --color-border: #363a4f;
+  --color-input: #363a4f;
+  --color-ring: #8aadf4;
+  --radius: 0.5rem;
+}
 
-    --color-card: hsl(39 59% 88%); /* bg1 */
-    --color-card-foreground: hsl(40 13% 23%); /* fg */
- 
-    --color-popover: hsl(39 59% 88%); /* bg1 */
-    --color-popover-foreground: hsl(40 13% 23%); /* fg */
- 
-    --color-primary: hsl(0 100% 31%); /* red */
-    --color-primary-foreground: hsl(40 92% 88%); /* bg */
- 
-    --color-secondary: hsl(39 46% 81%); /* bg2 */
-    --color-secondary-foreground: hsl(40 13% 23%); /* fg */
- 
-    --color-muted: hsl(37 29% 73%); /* bg3 */
-    --color-muted-foreground: hsl(40 4% 36%); /* gray */
- 
-    --color-accent: hsl(40 71% 49%); /* yellow */
-    --color-accent-foreground: hsl(0 0% 16%);
- 
-    --color-destructive: hsl(0 76% 46%); /* bright_red */
-    --color-destructive-foreground: hsl(40 92% 88%); /* bg */
- 
-    --color-border: hsl(33 14% 59%); /* fg4 */
-    --color-input: hsl(33 14% 59%); /* fg4 */
-    --color-ring: hsl(0 100% 31%); /* red */
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark {
-    --color-background: hsl(0 0% 16%); /* bg0 */
-    --color-foreground: hsl(40 92% 88%); /* fg */
- 
-    --color-card: hsl(0 7% 23%); /* bg1 */
-    --color-card-foreground: hsl(40 92% 88%); /* fg */
- 
-    --color-popover: hsl(0 7% 23%); /* bg1 */
-    --color-popover-foreground: hsl(40 92% 88%); /* fg */
- 
-    --color-primary: hsl(6 93% 59%); /* red */
-    --color-primary-foreground: hsl(0 0% 16%); /* bg */
- 
-    --color-secondary: hsl(0 5% 29%); /* bg2 */
-    --color-secondary-foreground: hsl(40 92% 88%); /* fg */
- 
-    --color-muted: hsl(20 6% 36%); /* bg3 */
-    --color-muted-foreground: hsl(33 14% 59%); /* gray */
- 
-    --color-accent: hsl(42 95% 58%); /* yellow */
-    --color-accent-foreground: hsl(0 0% 16%);
- 
-    --color-destructive: hsl(6 93% 59%); /* bright_red */
-    --color-destructive-foreground: hsl(40 92% 88%); /* bg */
- 
-    --color-border: hsl(24 10% 51%); /* fg4 */
-    --color-input: hsl(24 10% 51%); /* fg4 */
-    --color-ring: hsl(6 93% 59%); /* red */
-  }
+.dark {
+  /* Catppuccin Macchiato - we'll use the same colors for dark mode */
+  --color-background: #24273a;
+  --color-foreground: #cad3f5;
+  --color-card: #1e2030;
+  --color-card-foreground: #cad3f5;
+  --color-popover: #1e2030;
+  --color-popover-foreground: #cad3f5;
+  --color-primary: #8aadf4;
+  --color-primary-foreground: #24273a;
+  --color-secondary: #363a4f;
+  --color-secondary-foreground: #cad3f5;
+  --color-muted: #363a4f;
+  --color-muted-foreground: #a5adcb;
+  --color-accent: #f4dbd6;
+  --color-accent-foreground: #24273a;
+  --color-destructive: #ed8796;
+  --color-destructive-foreground: #24273a;
+  --color-border: #363a4f;
+  --color-input: #363a4f;
+  --color-ring: #8aadf4;
+}
 
   * {
     @apply box-border;