diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 150babe..40384dc 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -50,25 +50,30 @@
 }
 
 .dark {
-  --background: 0 0% 8%;
-  --foreground: 35 20% 95%;
-  --card: 0 0% 12%;
-  --card-foreground: 35 20% 95%;
-  --popover: 0 0% 12%;
-  --popover-foreground: 35 20% 95%;
-  --primary: 35 20% 95%;
-  --primary-foreground: 0 0% 8%;
-  --secondary: 0 0% 15%;
-  --secondary-foreground: 35 20% 95%;
-  --muted: 0 0% 15%;
-  --muted-foreground: 0 0% 60%;
-  --accent: 70 100% 50%;
-  --accent-foreground: 0 0% 8%;
-  --destructive: 0 80% 50%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 35 20% 95%;
-  --input: 35 20% 95%;
-  --ring: 70 100% 50%;
+  --background: 220 17% 22%;
+  --foreground: 220 17% 92%;
+  --card: 220 17% 27%;
+  --card-foreground: 220 17% 92%;
+  --popover: 220 17% 25%;
+  --popover-foreground: 220 17% 96%;
+  --primary: 220 17% 92%;
+  --primary-foreground: 220 17% 22%;
+  --secondary: 220 17% 32%;
+  --secondary-foreground: 220 17% 88%;
+  --muted: 220 17% 36%;
+  --muted-foreground: 220 17% 70%;
+  --accent: 193 48% 67%;
+  --accent-foreground: 220 17% 22%;
+  --destructive: 354 46% 56%;
+  --destructive-foreground: 220 17% 96%;
+  --border: 220 17% 36%;
+  --input: 220 17% 36%;
+  --ring: 193 48% 67%;
+  
+  --shadow-brutal: 4px 4px 0px 0px hsl(220 17% 36%);
+  --shadow-brutal-sm: 2px 2px 0px 0px hsl(220 17% 36%);
+  --shadow-brutal-lg: 6px 6px 0px 0px hsl(220 17% 36%);
+  --shadow-brutal-accent: 4px 4px 0px 0px hsl(193 48% 67%);
 }
 
 * {
@@ -341,7 +346,7 @@ body::before {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: hsl(var(--border));
+  background: hsl(var(--muted-foreground) / 0.3);
   border: 2px solid hsl(var(--secondary));
 }
 
diff --git a/pwa/src/styles.css b/pwa/src/styles.css
index 1db0dc5..ab8149e 100644
--- a/pwa/src/styles.css
+++ b/pwa/src/styles.css
@@ -50,25 +50,30 @@
 }
 
 .dark {
-  --background: 0 0% 8%;
-  --foreground: 35 20% 95%;
-  --card: 0 0% 12%;
-  --card-foreground: 35 20% 95%;
-  --popover: 0 0% 12%;
-  --popover-foreground: 35 20% 95%;
-  --primary: 35 20% 95%;
-  --primary-foreground: 0 0% 8%;
-  --secondary: 0 0% 15%;
-  --secondary-foreground: 35 20% 95%;
-  --muted: 0 0% 15%;
-  --muted-foreground: 0 0% 60%;
-  --accent: 70 100% 50%;
-  --accent-foreground: 0 0% 8%;
-  --destructive: 0 80% 50%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 35 20% 95%;
-  --input: 35 20% 95%;
-  --ring: 70 100% 50%;
+  --background: 220 17% 22%;
+  --foreground: 220 17% 92%;
+  --card: 220 17% 27%;
+  --card-foreground: 220 17% 92%;
+  --popover: 220 17% 25%;
+  --popover-foreground: 220 17% 96%;
+  --primary: 220 17% 92%;
+  --primary-foreground: 220 17% 22%;
+  --secondary: 220 17% 32%;
+  --secondary-foreground: 220 17% 88%;
+  --muted: 220 17% 36%;
+  --muted-foreground: 220 17% 70%;
+  --accent: 193 48% 67%;
+  --accent-foreground: 220 17% 22%;
+  --destructive: 354 46% 56%;
+  --destructive-foreground: 220 17% 96%;
+  --border: 220 17% 36%;
+  --input: 220 17% 36%;
+  --ring: 193 48% 67%;
+  
+  --shadow-brutal: 4px 4px 0px 0px hsl(220 17% 36%);
+  --shadow-brutal-sm: 2px 2px 0px 0px hsl(220 17% 36%);
+  --shadow-brutal-lg: 6px 6px 0px 0px hsl(220 17% 36%);
+  --shadow-brutal-accent: 4px 4px 0px 0px hsl(193 48% 67%);
 }
 
 * {
@@ -341,7 +346,7 @@ body::before {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: hsl(var(--border));
+  background: hsl(var(--muted-foreground) / 0.3);
   border: 2px solid hsl(var(--secondary));
 }