diff --git a/src/app.css b/src/app.css
index 257f6cc9..05b98672 100644
--- a/src/app.css
+++ b/src/app.css
@@ -3,73 +3,558 @@
 @import 'tw-animate-css';
 @custom-variant dark (&:is(.dark *));
 
-:root {
+html:has(#theme.shadcn-zinc) {
 	--radius: 0.625rem;
 	--background: oklch(1 0 0);
-	--foreground: oklch(0.145 0 0);
+	--foreground: oklch(0.141 0.005 285.823);
 	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.145 0 0);
+	--card-foreground: oklch(0.141 0.005 285.823);
 	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.145 0 0);
-	--primary: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.141 0.005 285.823);
+	--primary: oklch(0.21 0.006 285.885);
 	--primary-foreground: oklch(0.985 0 0);
-	--secondary: oklch(0.97 0 0);
-	--secondary-foreground: oklch(0.205 0 0);
-	--muted: oklch(0.97 0 0);
-	--muted-foreground: oklch(0.556 0 0);
-	--accent: oklch(0.97 0 0);
-	--accent-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.967 0.001 286.375);
+	--secondary-foreground: oklch(0.21 0.006 285.885);
+	--muted: oklch(0.967 0.001 286.375);
+	--muted-foreground: oklch(0.552 0.016 285.938);
+	--accent: oklch(0.967 0.001 286.375);
+	--accent-foreground: oklch(0.21 0.006 285.885);
 	--destructive: oklch(0.577 0.245 27.325);
-	--border: oklch(0.922 0 0);
-	--input: oklch(0.922 0 0);
-	--ring: oklch(0.708 0 0);
+	--border: oklch(0.92 0.004 286.32);
+	--input: oklch(0.92 0.004 286.32);
+	--ring: oklch(0.705 0.015 286.067);
 	--chart-1: oklch(0.646 0.222 41.116);
 	--chart-2: oklch(0.6 0.118 184.704);
 	--chart-3: oklch(0.398 0.07 227.392);
 	--chart-4: oklch(0.828 0.189 84.429);
 	--chart-5: oklch(0.769 0.188 70.08);
 	--sidebar: oklch(0.985 0 0);
-	--sidebar-foreground: oklch(0.145 0 0);
-	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.141 0.005 285.823);
+	--sidebar-primary: oklch(0.21 0.006 285.885);
 	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.97 0 0);
-	--sidebar-accent-foreground: oklch(0.205 0 0);
-	--sidebar-border: oklch(0.922 0 0);
-	--sidebar-ring: oklch(0.708 0 0);
+	--sidebar-accent: oklch(0.967 0.001 286.375);
+	--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+	--sidebar-border: oklch(0.92 0.004 286.32);
+	--sidebar-ring: oklch(0.705 0.015 286.067);
 }
 
-.dark {
-	--background: oklch(0.145 0 0);
+html.dark:has(#theme.shadcn-zinc) {
+	--background: oklch(0.141 0.005 285.823);
 	--foreground: oklch(0.985 0 0);
-	--card: oklch(0.205 0 0);
+	--card: oklch(0.21 0.006 285.885);
 	--card-foreground: oklch(0.985 0 0);
-	--popover: oklch(0.205 0 0);
+	--popover: oklch(0.21 0.006 285.885);
 	--popover-foreground: oklch(0.985 0 0);
-	--primary: oklch(0.922 0 0);
-	--primary-foreground: oklch(0.205 0 0);
-	--secondary: oklch(0.269 0 0);
+	--primary: oklch(0.92 0.004 286.32);
+	--primary-foreground: oklch(0.21 0.006 285.885);
+	--secondary: oklch(0.274 0.006 286.033);
 	--secondary-foreground: oklch(0.985 0 0);
-	--muted: oklch(0.269 0 0);
-	--muted-foreground: oklch(0.708 0 0);
-	--accent: oklch(0.269 0 0);
+	--muted: oklch(0.274 0.006 286.033);
+	--muted-foreground: oklch(0.705 0.015 286.067);
+	--accent: oklch(0.274 0.006 286.033);
 	--accent-foreground: oklch(0.985 0 0);
 	--destructive: oklch(0.704 0.191 22.216);
 	--border: oklch(1 0 0 / 10%);
 	--input: oklch(1 0 0 / 15%);
-	--ring: oklch(0.556 0 0);
+	--ring: oklch(0.552 0.016 285.938);
 	--chart-1: oklch(0.488 0.243 264.376);
 	--chart-2: oklch(0.696 0.17 162.48);
 	--chart-3: oklch(0.769 0.188 70.08);
 	--chart-4: oklch(0.627 0.265 303.9);
 	--chart-5: oklch(0.645 0.246 16.439);
-	--sidebar: oklch(0.205 0 0);
+	--sidebar: oklch(0.21 0.006 285.885);
 	--sidebar-foreground: oklch(0.985 0 0);
 	--sidebar-primary: oklch(0.488 0.243 264.376);
 	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent: oklch(0.274 0.006 286.033);
 	--sidebar-accent-foreground: oklch(0.985 0 0);
 	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.556 0 0);
+	--sidebar-ring: oklch(0.552 0.016 285.938);
+}
+html:has(#theme.black-white) {
+	--background: #ffffff;
+	--foreground: #000000;
+	--card: #ffffff;
+	--card-foreground: #000000;
+	--popover: #ffffff;
+	--popover-foreground: #000000;
+	--primary: #000000;
+	--primary-foreground: #ffffff;
+	--secondary: #000000;
+	--secondary-foreground: #ffffff;
+	--muted: #ffffff;
+	--muted-foreground: #000000;
+	--accent: #000000;
+	--accent-foreground: #ffffff;
+	--destructive: #000000;
+	--destructive-foreground: #ffffff;
+	--border: #aaaaaa;
+	--input: #000000;
+	--ring: #000000;
+	--chart-1: #000000;
+	--chart-2: #aaaaaa;
+	--chart-3: #ffffff;
+	--chart-4: #000000;
+	--chart-5: #aaaaaa;
+	--sidebar: #ffffff;
+	--sidebar-foreground: #000000;
+	--sidebar-primary: #000000;
+	--sidebar-primary-foreground: #ffffff;
+	--sidebar-accent: #000000;
+	--sidebar-accent-foreground: #ffffff;
+	--sidebar-border: #aaaaaa;
+	--sidebar-ring: #aaaaaa;
+	--radius: 8px;
+	--shadow-2xs: 0px 2px 8px 0px hsl(0 0% 0% / 0.1);
+	--shadow-xs: 0px 2px 8px 0px hsl(0 0% 0% / 0.1);
+	--shadow-sm: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2);
+	--shadow: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2);
+	--shadow-md: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 2px 4px -1px hsl(0 0% 0% / 0.2);
+	--shadow-lg: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 4px 6px -1px hsl(0 0% 0% / 0.2);
+	--shadow-xl: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 8px 10px -1px hsl(0 0% 0% / 0.2);
+	--shadow-2xl: 0px 2px 8px 0px hsl(0 0% 0% / 0.5);
+	--tracking-normal: 0px;
+}
+
+html.dark:has(#theme.black-white) {
+	--background: #000000;
+	--foreground: #ffffff;
+	--card: #000000;
+	--card-foreground: #ffffff;
+	--popover: #000000;
+	--popover-foreground: #ffffff;
+	--primary: #ffffff;
+	--primary-foreground: #000000;
+	--secondary: #ffffff;
+	--secondary-foreground: #000000;
+	--muted: #000000;
+	--muted-foreground: #ffffff;
+	--accent: #ffffff;
+	--accent-foreground: #000000;
+	--destructive: #ffffff;
+	--destructive-foreground: #000000;
+	--border: #444444;
+	--input: #ffffff;
+	--ring: #ffffff;
+	--chart-1: #ffffff;
+	--chart-2: #aaaaaa;
+	--chart-3: #000000;
+	--chart-4: #ffffff;
+	--chart-5: #aaaaaa;
+	--sidebar: #000000;
+	--sidebar-foreground: #ffffff;
+	--sidebar-primary: #ffffff;
+	--sidebar-primary-foreground: #000000;
+	--sidebar-accent: #ffffff;
+	--sidebar-accent-foreground: #000000;
+	--sidebar-border: #444444;
+	--sidebar-ring: #444444;
+	--radius: 8px;
+	--shadow-2xs: 0px 2px 8px 0px hsl(0 0% 0% / 0.1);
+	--shadow-xs: 0px 2px 8px 0px hsl(0 0% 0% / 0.1);
+	--shadow-sm: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2);
+	--shadow: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2);
+	--shadow-md: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 2px 4px -1px hsl(0 0% 0% / 0.2);
+	--shadow-lg: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 4px 6px -1px hsl(0 0% 0% / 0.2);
+	--shadow-xl: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 8px 10px -1px hsl(0 0% 0% / 0.2);
+	--shadow-2xl: 0px 2px 8px 0px hsl(0 0% 0% / 0.5);
+}
+
+html:has(#theme.catppuccin) {
+	--background: #eff1f5;
+	--foreground: #4c4f69;
+	--card: #ffffff;
+	--card-foreground: #4c4f69;
+	--popover: #ccd0da;
+	--popover-foreground: #4c4f69;
+	--primary: #8839ef;
+	--primary-foreground: #ffffff;
+	--secondary: #ccd0da;
+	--secondary-foreground: #4c4f69;
+	--muted: #dce0e8;
+	--muted-foreground: #6c6f85;
+	--accent: #04a5e5;
+	--accent-foreground: #ffffff;
+	--destructive: #d20f39;
+	--destructive-foreground: #ffffff;
+	--border: #bcc0cc;
+	--input: #ccd0da;
+	--ring: #8839ef;
+	--chart-1: #8839ef;
+	--chart-2: #04a5e5;
+	--chart-3: #40a02b;
+	--chart-4: #fe640b;
+	--chart-5: #dc8a78;
+	--sidebar: #e6e9ef;
+	--sidebar-foreground: #4c4f69;
+	--sidebar-primary: #8839ef;
+	--sidebar-primary-foreground: #ffffff;
+	--sidebar-accent: #04a5e5;
+	--sidebar-accent-foreground: #ffffff;
+	--sidebar-border: #bcc0cc;
+	--sidebar-ring: #8839ef;
+	--radius: 0.35rem;
+	--shadow-2xs: 0px 4px 6px 0px hsl(240 30% 25% / 0.06);
+	--shadow-xs: 0px 4px 6px 0px hsl(240 30% 25% / 0.06);
+	--shadow-sm: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
+	--shadow: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
+	--shadow-md: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12);
+	--shadow-lg: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12);
+	--shadow-xl: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12);
+	--shadow-2xl: 0px 4px 6px 0px hsl(240 30% 25% / 0.3);
+}
+
+html.dark:has(#theme.catppuccin) {
+	--background: #181825;
+	--foreground: #cdd6f4;
+	--card: #1e1e2e;
+	--card-foreground: #cdd6f4;
+	--popover: #45475a;
+	--popover-foreground: #cdd6f4;
+	--primary: #cba6f7;
+	--primary-foreground: #1e1e2e;
+	--secondary: #585b70;
+	--secondary-foreground: #cdd6f4;
+	--muted: #292c3c;
+	--muted-foreground: #a6adc8;
+	--accent: #89dceb;
+	--accent-foreground: #1e1e2e;
+	--destructive: #f38ba8;
+	--destructive-foreground: #1e1e2e;
+	--border: #313244;
+	--input: #313244;
+	--ring: #cba6f7;
+	--chart-1: #cba6f7;
+	--chart-2: #89dceb;
+	--chart-3: #a6e3a1;
+	--chart-4: #fab387;
+	--chart-5: #f5e0dc;
+	--sidebar: #11111b;
+	--sidebar-foreground: #cdd6f4;
+	--sidebar-primary: #cba6f7;
+	--sidebar-primary-foreground: #1e1e2e;
+	--sidebar-accent: #89dceb;
+	--sidebar-accent-foreground: #1e1e2e;
+	--sidebar-border: #45475a;
+	--sidebar-ring: #cba6f7;
+	--radius: 0.35rem;
+	--shadow-2xs: 0px 4px 6px 0px hsl(240 30% 25% / 0.06);
+	--shadow-xs: 0px 4px 6px 0px hsl(240 30% 25% / 0.06);
+	--shadow-sm: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
+	--shadow: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
+	--shadow-md: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12);
+	--shadow-lg: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12);
+	--shadow-xl: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12);
+	--shadow-2xl: 0px 4px 6px 0px hsl(240 30% 25% / 0.3);
+}
+
+html:has(#theme.catppuccin-darker) {
+	--background: #11111b;
+	--foreground: #cdd6f4;
+	--card: #1e1e2e;
+	--card-foreground: #cdd6f4;
+	--popover: #1e1e2e;
+	--popover-foreground: #cdd6f4;
+	--primary: #cba6f7;
+	--primary-foreground: #1e1e2e;
+	--secondary: #313244;
+	--secondary-foreground: #cdd6f4;
+	--muted: #313244;
+	--muted-foreground: #bac2de;
+	--accent: #313244;
+	--accent-foreground: #cdd6f4;
+	--destructive: #f38ba8;
+	--destructive-foreground: #181825;
+	--border: #45475a;
+	--input: #45475a;
+	--ring: #cdd6f4;
+	--chart-1: #f38ba8;
+	--chart-2: #94e2d5;
+	--chart-3: #89b4fa;
+	--chart-4: #f9e2af;
+	--chart-5: #a7e3a1;
+	--sidebar: #1e1e2e;
+	--sidebar-foreground: #cdd6f4;
+	--sidebar-primary: #cba6f7;
+	--sidebar-primary-foreground: #1e1e2e;
+	--sidebar-accent: #1e1e2e;
+	--sidebar-accent-foreground: #cdd6f4;
+	--sidebar-border: #45475a;
+	--sidebar-ring: #cba6f7;
+	--radius: 0.9rem;
+	--shadow-2xs: 0px 4px 6px 0px hsl(0 0% 0% / 0.06);
+	--shadow-xs: 0px 4px 6px 0px hsl(0 0% 0% / 0.06);
+	--shadow-sm: 0px 4px 6px 0px hsl(0 0% 0% / 0.12), 0px 1px 2px -1px hsl(0 0% 0% / 0.12);
+	--shadow: 0px 4px 6px 0px hsl(0 0% 0% / 0.12), 0px 1px 2px -1px hsl(0 0% 0% / 0.12);
+	--shadow-md: 0px 4px 6px 0px hsl(0 0% 0% / 0.12), 0px 2px 4px -1px hsl(0 0% 0% / 0.12);
+	--shadow-lg: 0px 4px 6px 0px hsl(0 0% 0% / 0.12), 0px 4px 6px -1px hsl(0 0% 0% / 0.12);
+	--shadow-xl: 0px 4px 6px 0px hsl(0 0% 0% / 0.12), 0px 8px 10px -1px hsl(0 0% 0% / 0.12);
+	--shadow-2xl: 0px 4px 6px 0px hsl(0 0% 0% / 0.3);
+}
+
+html:has(#theme.terminal) {
+	--background: #000000;
+	--foreground: #00ff00;
+	--card: #000000;
+	--card-foreground: #00ff00;
+	--popover: #000000;
+	--popover-foreground: #00ff00;
+	--primary: #008000;
+	--primary-foreground: #ffffff;
+	--secondary: #004000;
+	--secondary-foreground: #ffffff;
+	--muted: #111111;
+	--muted-foreground: #00ff00;
+	--accent: #111111;
+	--accent-foreground: #00ff00;
+	--destructive: #ff0000;
+	--destructive-foreground: #ffffff;
+	--border: #111111;
+	--input: #00ff00;
+	--ring: #00ff00;
+	--chart-1: #008000;
+	--chart-2: #004000;
+	--chart-3: #002000;
+	--chart-4: #000080;
+	--chart-5: #000040;
+	--sidebar: #000000;
+	--sidebar-foreground: #00ff00;
+	--sidebar-primary: #008000;
+	--sidebar-primary-foreground: #ffffff;
+	--sidebar-accent: #00ff00;
+	--sidebar-accent-foreground: #000000;
+	--sidebar-border: #444444;
+	--sidebar-ring: #00ff00;
+	--radius: 8px;
+	--shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.1);
+	--shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.1);
+	--shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2);
+	--shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2);
+	--shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 2px 4px -1px hsl(0 0% 0% / 0.2);
+	--shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 4px 6px -1px hsl(0 0% 0% / 0.2);
+	--shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 8px 10px -1px hsl(0 0% 0% / 0.2);
+	--shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.5);
+}
+
+html:has(#theme.cyberpunk) {
+	--background: #f8f9fa;
+	--foreground: #0c0c1d;
+	--card: #ffffff;
+	--card-foreground: #0c0c1d;
+	--popover: #ffffff;
+	--popover-foreground: #0c0c1d;
+	--primary: #ff00c8;
+	--primary-foreground: #ffffff;
+	--secondary: #f0f0ff;
+	--secondary-foreground: #0c0c1d;
+	--muted: #f0f0ff;
+	--muted-foreground: #0c0c1d;
+	--accent: #00ffcc;
+	--accent-foreground: #0c0c1d;
+	--destructive: #ff3d00;
+	--destructive-foreground: #ffffff;
+	--border: #dfe6e9;
+	--input: #dfe6e9;
+	--ring: #ff00c8;
+	--chart-1: #ff00c8;
+	--chart-2: #9000ff;
+	--chart-3: #00e5ff;
+	--chart-4: #00ffcc;
+	--chart-5: #ffe600;
+	--sidebar: #f0f0ff;
+	--sidebar-foreground: #0c0c1d;
+	--sidebar-primary: #ff00c8;
+	--sidebar-primary-foreground: #ffffff;
+	--sidebar-accent: #00ffcc;
+	--sidebar-accent-foreground: #0c0c1d;
+	--sidebar-border: #dfe6e9;
+	--sidebar-ring: #ff00c8;
+	--radius: 0.5rem;
+	--shadow-2xs: 0px 4px 8px -2px hsl(0 0% 0% / 0.05);
+	--shadow-xs: 0px 4px 8px -2px hsl(0 0% 0% / 0.05);
+	--shadow-sm: 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 1px 2px -3px hsl(0 0% 0% / 0.1);
+	--shadow: 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 1px 2px -3px hsl(0 0% 0% / 0.1);
+	--shadow-md: 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 2px 4px -3px hsl(0 0% 0% / 0.1);
+	--shadow-lg: 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 4px 6px -3px hsl(0 0% 0% / 0.1);
+	--shadow-xl: 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 8px 10px -3px hsl(0 0% 0% / 0.1);
+	--shadow-2xl: 0px 4px 8px -2px hsl(0 0% 0% / 0.25);
+}
+
+html.dark:has(#theme.cyberpunk) {
+	--background: #0c0c1d;
+	--foreground: #eceff4;
+	--card: #1e1e3f;
+	--card-foreground: #eceff4;
+	--popover: #1e1e3f;
+	--popover-foreground: #eceff4;
+	--primary: #ff00c8;
+	--primary-foreground: #ffffff;
+	--secondary: #1e1e3f;
+	--secondary-foreground: #eceff4;
+	--muted: #1e1e3f;
+	--muted-foreground: #8085a6;
+	--accent: #00ffcc;
+	--accent-foreground: #0c0c1d;
+	--destructive: #ff3d00;
+	--destructive-foreground: #ffffff;
+	--border: #2e2e5e;
+	--input: #2e2e5e;
+	--ring: #ff00c8;
+	--chart-1: #ff00c8;
+	--chart-2: #9000ff;
+	--chart-3: #00e5ff;
+	--chart-4: #00ffcc;
+	--chart-5: #ffe600;
+	--sidebar: #0c0c1d;
+	--sidebar-foreground: #eceff4;
+	--sidebar-primary: #ff00c8;
+	--sidebar-primary-foreground: #ffffff;
+	--sidebar-accent: #00ffcc;
+	--sidebar-accent-foreground: #0c0c1d;
+	--sidebar-border: #2e2e5e;
+	--sidebar-ring: #ff00c8;
+	--radius: 0.5rem;
+	--shadow-2xs: 0px 4px 8px -2px hsl(0 0% 0% / 0.05);
+	--shadow-xs: 0px 4px 8px -2px hsl(0 0% 0% / 0.05);
+	--shadow-sm: 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 1px 2px -3px hsl(0 0% 0% / 0.1);
+	--shadow: 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 1px 2px -3px hsl(0 0% 0% / 0.1);
+	--shadow-md: 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 2px 4px -3px hsl(0 0% 0% / 0.1);
+	--shadow-lg: 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 4px 6px -3px hsl(0 0% 0% / 0.1);
+	--shadow-xl: 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 8px 10px -3px hsl(0 0% 0% / 0.1);
+	--shadow-2xl: 0px 4px 8px -2px hsl(0 0% 0% / 0.25);
+}
+
+html:has(#theme.vercel) {
+	--background: #fcfcfc;
+	--foreground: #000000;
+	--card: #ffffff;
+	--card-foreground: #000000;
+	--popover: #fcfcfc;
+	--popover-foreground: #000000;
+	--primary: #000000;
+	--primary-foreground: #ffffff;
+	--secondary: #ebebeb;
+	--secondary-foreground: #000000;
+	--muted: #f5f5f5;
+	--muted-foreground: #525252;
+	--accent: #ebebeb;
+	--accent-foreground: #000000;
+	--destructive: #e54b4f;
+	--destructive-foreground: #ffffff;
+	--border: #e4e4e4;
+	--input: #ebebeb;
+	--ring: #000000;
+	--chart-1: #ffae04;
+	--chart-2: #2d62ef;
+	--chart-3: #a4a4a4;
+	--chart-4: #e4e4e4;
+	--chart-5: #747474;
+	--sidebar: #fcfcfc;
+	--sidebar-foreground: #000000;
+	--sidebar-primary: #000000;
+	--sidebar-primary-foreground: #ffffff;
+	--sidebar-accent: #ebebeb;
+	--sidebar-accent-foreground: #000000;
+	--sidebar-border: #ebebeb;
+	--sidebar-ring: #000000;
+	--radius: 0.5rem;
+	--shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
+	--shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
+	--shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
+	--shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
+	--shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
+	--shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
+	--shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
+	--shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
+}
+
+html.dark:has(#theme.vercel) {
+	--background: #000000;
+	--foreground: #ffffff;
+	--card: #090909;
+	--card-foreground: #ffffff;
+	--popover: #121212;
+	--popover-foreground: #ffffff;
+	--primary: #ffffff;
+	--primary-foreground: #000000;
+	--secondary: #222222;
+	--secondary-foreground: #ffffff;
+	--muted: #1d1d1d;
+	--muted-foreground: #a4a4a4;
+	--accent: #333333;
+	--accent-foreground: #ffffff;
+	--destructive: #ff5b5b;
+	--destructive-foreground: #000000;
+	--border: #242424;
+	--input: #333333;
+	--ring: #a4a4a4;
+	--chart-1: #ffae04;
+	--chart-2: #2671f4;
+	--chart-3: #747474;
+	--chart-4: #525252;
+	--chart-5: #e4e4e4;
+	--sidebar: #121212;
+	--sidebar-foreground: #ffffff;
+	--sidebar-primary: #ffffff;
+	--sidebar-primary-foreground: #000000;
+	--sidebar-accent: #333333;
+	--sidebar-accent-foreground: #ffffff;
+	--sidebar-border: #333333;
+	--sidebar-ring: #a4a4a4;
+	--radius: 0.5rem;
+	--shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
+	--shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
+	--shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
+	--shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
+	--shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
+	--shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
+	--shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
+	--shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
+}
+
+html:has(#theme.google-classroom) {
+	--background: #ffffff;
+	--foreground: #000000;
+	--card: #f8fafd;
+	--card-foreground: #333333;
+	--popover: #f8fafd;
+	--popover-foreground: #333333;
+	--primary: #c2e7ff;
+	--primary-foreground: #333333;
+	--secondary: #dbe5f5;
+	--secondary-foreground: #333333;
+	--muted: #e5e5e5;
+	--muted-foreground: #666666;
+	--accent: #87ceeb;
+	--accent-foreground: #ffffff;
+	--destructive: #ff6666;
+	--destructive-foreground: #ffffff;
+	--border: #dddddd;
+	--input: #f8fafd;
+	--ring: #c2e7ff;
+	--chart-1: #c2e7ff;
+	--chart-2: #87ceeb;
+	--chart-3: #66cccc;
+	--chart-4: #44aaaa;
+	--chart-5: #22aaaa;
+	--sidebar: #f8fafd;
+	--sidebar-foreground: #333333;
+	--sidebar-primary: #c2e7ff;
+	--sidebar-primary-foreground: #333333;
+	--sidebar-accent: #87ceeb;
+	--sidebar-accent-foreground: #ffffff;
+	--sidebar-border: #dddddd;
+	--sidebar-ring: #c2e7ff;
+	--radius: 8px;
+	--shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.1);
+	--shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.1);
+	--shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2);
+	--shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2);
+	--shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 2px 4px -1px hsl(0 0% 0% / 0.2);
+	--shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 4px 6px -1px hsl(0 0% 0% / 0.2);
+	--shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 8px 10px -1px hsl(0 0% 0% / 0.2);
+	--shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.5);
+	--tracking-normal: 0px;
 }
 
 @theme inline {
diff --git a/src/lib/components/app-sidebar.svelte b/src/lib/components/app-sidebar.svelte
index 78fb2a70..c5b58c5d 100644
--- a/src/lib/components/app-sidebar.svelte
+++ b/src/lib/components/app-sidebar.svelte
@@ -144,7 +144,7 @@
 	<Sidebar.Header>
 		<Sidebar.Menu>
 			<Sidebar.MenuItem>
-				<Sidebar.MenuButton size="lg" class="!transition-all hover:scale-105 active:scale-95">
+				<Sidebar.MenuButton size="lg">
 					{#snippet child({ props })}
 						<a
 							href="/"
@@ -155,7 +155,7 @@
 						>
 							<div
 								class={clsx(
-									'text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg bg-gray-700 p-1'
+									'text-sidebar-primary-foreground foreground flex aspect-square size-8 items-center justify-center rounded-lg bg-black p-1'
 								)}
 							>
 								<img src="/edutools-white.svg" alt="" />
@@ -169,7 +169,7 @@
 				</Sidebar.MenuButton>
 			</Sidebar.MenuItem>
 			<Sidebar.MenuItem>
-				<Sidebar.MenuButton size="lg" class="!transition-all hover:scale-105 active:scale-95">
+				<Sidebar.MenuButton size="lg">
 					{#snippet child({ props })}
 						<button
 							onclick={function () {
@@ -178,9 +178,7 @@
 							}}
 							{...props}
 						>
-							<div
-								class="text-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
-							>
+							<div class="flex aspect-square size-8 items-center justify-center rounded-lg">
 								<Search class="size-4" />
 							</div>
 							<div class="flex w-full flex-row items-center gap-2 leading-none">
diff --git a/src/lib/components/settings.svelte b/src/lib/components/settings.svelte
index a5ee4a45..6e84a560 100644
--- a/src/lib/components/settings.svelte
+++ b/src/lib/components/settings.svelte
@@ -9,7 +9,10 @@
 	import { buttonVariants } from './ui/button';
 	import * as Tabs from '$lib/components/ui/tabs/index.js';
 	import * as Alert from '$lib/components/ui/alert/index.js';
-	import CircleAlertIcon from '@lucide/svelte/icons/circle-alert';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+	import SunIcon from '@lucide/svelte/icons/sun';
+	import MoonIcon from '@lucide/svelte/icons/moon';
+	import { toggleMode } from 'mode-watcher';
 
 	import { settingsOpen } from '$lib/state.svelte';
 	import { preferencesStore, historyStore } from '$lib/stores';
@@ -41,24 +44,38 @@
 				</div>
 			</RadioGroup.Root>
 			Themes
-			<Dialog.Root>
-				<Dialog.Trigger class={clsx(buttonVariants({ variant: 'outline' }), 'w-fit justify-start')}>
-					{themeTriggerContent}
-					<ChevronDownIcon class="opacity-50" />
-				</Dialog.Trigger>
-				<Dialog.Content class="p-0">
-					<div class="max-h-[80vh] overflow-auto p-6">
-						<RadioGroup.Root bind:value={$preferencesStore.theme}>
-							{#each themes as theme}
-								<div class="flex items-center space-x-2">
-									<RadioGroup.Item value={theme.value} id={theme.value} />
-									<Label for={theme.value}>{theme.label}</Label>
-								</div>
-							{/each}
-						</RadioGroup.Root>
-					</div>
-				</Dialog.Content>
-			</Dialog.Root>
+			<div class="flex flex-row gap-2">
+				<Dialog.Root>
+					<Dialog.Trigger
+						class={clsx(buttonVariants({ variant: 'outline' }), 'w-fit justify-start')}
+					>
+						{themeTriggerContent}
+						<ChevronDownIcon class="opacity-50" />
+					</Dialog.Trigger>
+
+					<Dialog.Content class="p-0">
+						<div class="max-h-[80vh] overflow-auto p-6">
+							<RadioGroup.Root bind:value={$preferencesStore.theme}>
+								{#each themes as theme}
+									<div class="flex items-center space-x-2">
+										<RadioGroup.Item value={theme.value} id={theme.value} />
+										<Label for={theme.value}>{theme.label}</Label>
+									</div>
+								{/each}
+							</RadioGroup.Root>
+						</div>
+					</Dialog.Content>
+				</Dialog.Root>
+				<Button onclick={toggleMode} variant="outline" size="icon">
+					<SunIcon
+						class="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90"
+					/>
+					<MoonIcon
+						class="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0"
+					/>
+					<span class="sr-only">Toggle theme</span>
+				</Button>
+			</div>
 			Panic key (requires refresh to apply)
 			<div class="flex items-center gap-3">
 				<Checkbox id="panic" bind:checked={$preferencesStore.panic.enabled} />
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
index 6304ec03..9112d074 100644
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -3,7 +3,7 @@ import { persisted } from 'svelte-persisted-store';
 export const preferencesStore = persisted('preferences', {
 	experimentalFeatures: false,
 	open: 'tab',
-	theme: 'shadcn-zinc-dark',
+	theme: 'shadcn-zinc',
 	panic: {
 		enabled: false,
 		key: '`',
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
index 5d863576..28cd9156 100644
--- a/src/lib/theme.ts
+++ b/src/lib/theme.ts
@@ -1,41 +1,10 @@
 export const themes = [
-	{ value: 'shadcn-zinc-light', label: 'Shadcn Zinc Light' },
-	{ value: 'shadcn-zinc-dark', label: 'Shadcn Zinc Dark' },
-	{ value: 'black', label: 'Black' },
-	{ value: 'catppuccin-latte', label: 'Catppuccin Latte' },
-	{ value: 'catppuccin-frappe', label: 'Catppuccin Frappe' },
-	{ value: 'catppuccin-macchiato', label: 'Catppuccin Macchiato' },
-	{ value: 'catppuccin-mocha', label: 'Catppuccin Mocha' },
-	{ value: 'gruvbox-light', label: 'Gruvbox Light' },
-	{ value: 'gruvbox-dark', label: 'Gruvbox Dark' },
-	{ value: 'solarised', label: 'Solarised' },
-	{ value: 'github', label: 'GitHub' },
+	{ value: 'shadcn-zinc', label: 'Shadcn Zinc' },
+	{ value: 'black-white', label: 'Black & White' },
+	{ value: 'catppuccin', label: 'Catppuccin' },
+	{ value: 'catppuccin-darker', label: 'Catppuccin Darker' },
+	{ value: 'vercel', label: 'Vercel' },
 	{ value: 'terminal', label: 'Terminal' },
-	{ value: 'material-red', label: 'Material Red' },
-	{ value: 'material-green', label: 'Material Green' },
-	{ value: 'material-blue', label: 'Material Blue' },
-	{ value: 'material-yellow', label: 'Material Yellow' },
-	{ value: 'shadcn-slate-light', label: 'Shadcn Slate Light' },
-	{ value: 'shadcn-slate-dark', label: 'Shadcn Slate Dark' },
-	{ value: 'shadcn-stone-light', label: 'Shadcn Stone Light' },
-	{ value: 'shadcn-stone-dark', label: 'Shadcn Stone Dark' },
-	{ value: 'shadcn-gray-light', label: 'Shadcn Gray Light' },
-	{ value: 'shadcn-gray-dark', label: 'Shadcn Gray Dark' },
-	{ value: 'shadcn-neutral-light', label: 'Shadcn Neutral Light' },
-	{ value: 'shadcn-neutral-dark', label: 'Shadcn Neutral Dark' },
-	{ value: 'shadcn-red-light', label: 'Shadcn Red Light' },
-	{ value: 'shadcn-red-dark', label: 'Shadcn Red Dark' },
-	{ value: 'shadcn-rose-light', label: 'Shadcn Rose Light' },
-	{ value: 'shadcn-rose-dark', label: 'Shadcn Rose Dark' },
-	{ value: 'shadcn-orange-light', label: 'Shadcn Orange Light' },
-	{ value: 'shadcn-orange-dark', label: 'Shadcn Orange Dark' },
-	{ value: 'shadcn-green-light', label: 'Shadcn Green Light' },
-	{ value: 'shadcn-green-dark', label: 'Shadcn Green Dark' },
-	{ value: 'shadcn-blue-light', label: 'Shadcn Blue Light' },
-	{ value: 'shadcn-blue-dark', label: 'Shadcn Blue Dark' },
-	{ value: 'shadcn-yellow-light', label: 'Shadcn Yellow Light' },
-	{ value: 'shadcn-yellow-dark', label: 'Shadcn Yellow Dark' },
-	{ value: 'shadcn-violet-light', label: 'Shadcn Violet Light' },
-	{ value: 'shadcn-violet-dark', label: 'Shadcn Violet Dark' },
-	{ value: 'google-classroom', label: 'Google Classroom :)' }
+	{ value: 'cyberpunk', label: 'Cyberpunk' },
+	{ value: 'google-classroom', label: 'Kinda Google Classroom :)' }
 ];
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3060db32..0e3e7e41 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -84,7 +84,7 @@
 <PanicMode />
 <Cloak />
 <Toaster />
-<ModeWatcher defaultMode={'dark'} />
+<ModeWatcher disableTransitions={false} defaultMode={'dark'} />
 <Settings />
 <Sidebar.Provider class="flex flex-col md:flex-row">
 	<AppSidebar />