diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 63e8c6a..6794a97 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -161,7 +161,7 @@ function App() {
       : 'thrift';
 
   return (
-    <div className="flex h-screen flex-col bg-gradient-to-br from-gray-50 to-gray-100 p-3 dark:from-[#242938] dark:to-[#1e2230]">
+    <div className="flex h-screen flex-col bg-gradient-to-br from-gray-50 to-gray-100 p-3 dark:from-[#1a1c23] dark:to-[#22242c]">
       <div className="mx-auto flex h-full w-full max-w-[1600px] flex-col gap-3">
         <Header
           isThriftToJson={isThriftToJson}
diff --git a/apps/web/src/components/editor/ThriftEditor.tsx b/apps/web/src/components/editor/ThriftEditor.tsx
index cc57836..31d1866 100644
--- a/apps/web/src/components/editor/ThriftEditor.tsx
+++ b/apps/web/src/components/editor/ThriftEditor.tsx
@@ -58,7 +58,7 @@ export function ThriftEditor({
         'flex h-full flex-col overflow-hidden rounded-lg bg-white shadow-sm dark:bg-[#2b3245]/90',
         className
       )}>
-      <div className="flex items-center justify-between border-b border-gray-100 px-4 py-2 dark:border-[#363d52]/50">
+      <div className="flex items-center justify-between border-b border-gray-100 bg-gray-50/80 px-4 py-2 dark:border-[#363d52]/50 dark:bg-[#282b33]">
         <div className="flex items-center gap-2">
           <TitleIcon className="h-4 w-4 text-blue-500/70" strokeWidth={2.5} />
           <div>
@@ -95,7 +95,7 @@ export function ThriftEditor({
           readOnly={!editable}
           extensions={[json()]}
           className={cn(
-            'h-full overflow-auto [&_.cm-gutters]:border-none [&_.cm-gutters]:bg-white [&_.cm-focused]:outline-none dark:[&_.cm-gutters]:bg-[#0d1117]',
+            'h-full overflow-auto [&_.cm-gutters]:border-none [&_.cm-gutters]:bg-white [&_.cm-focused]:outline-none dark:[&_.cm-gutters]:bg-[#282b33] dark:[&_.cm-editor]:bg-[#282b33]',
             !editable && 'cursor-text select-text'
           )}
           basicSetup={{
diff --git a/apps/web/src/components/layout/Header.tsx b/apps/web/src/components/layout/Header.tsx
index 3a4de10..473ad28 100644
--- a/apps/web/src/components/layout/Header.tsx
+++ b/apps/web/src/components/layout/Header.tsx
@@ -26,8 +26,8 @@ export function Header({
   parserMetrics
 }: HeaderProps) {
   return (
-    <header className="relative flex items-center justify-between overflow-hidden rounded-2xl border border-gray-200/20 bg-white/10 px-5 py-3 shadow-[0_8px_16px_-6px_rgb(0_0_0/0.05)] backdrop-blur-xl dark:border-[#363d52]/30 dark:bg-[#2b3245]/40 dark:shadow-[0_8px_16px_-6px_rgb(0_0_0/0.2)]">
-      <div className="absolute inset-0 bg-gradient-to-r from-white/50 via-white/30 to-white/50 dark:from-[#363d52]/20 dark:via-[#2f354a]/15 dark:to-[#363d52]/20" />
+    <header className="relative flex items-center justify-between overflow-hidden rounded-2xl border border-gray-200/20 bg-white/10 px-5 py-3 shadow-[0_8px_16px_-6px_rgb(0_0_0/0.05)] backdrop-blur-xl dark:border-[#363d52]/30 dark:bg-[#282b33]/40 dark:shadow-[0_8px_16px_-6px_rgb(0_0_0/0.2)]">
+      <div className="absolute inset-0 bg-gradient-to-r from-white/50 via-white/30 to-white/50 dark:from-[#282b33]/20 dark:via-[#282b33]/15 dark:to-[#282b33]/20" />
       <div className="relative flex items-center gap-3">
         <RicoLogo className="h-8 w-8" />
         <div>
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 51c373f..55b9b27 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -37,33 +37,33 @@
   }
 
   .dark {
-    --background: 220 20% 10%;
+    --background: 222 17% 18%;
     --foreground: 220 15% 95%;
 
-    --muted: 220 15% 15%;
+    --muted: 223 17% 15%;
     --muted-foreground: 220 15% 65%;
 
-    --popover: 220 20% 10%;
+    --popover: 222 17% 18%;
     --popover-foreground: 220 15% 95%;
 
-    --card: 220 20% 10%;
+    --card: 222 17% 18%;
     --card-foreground: 220 15% 95%;
 
-    --border: 220 15% 20%;
-    --input: 220 15% 20%;
+    --border: 223 17% 22%;
+    --input: 223 17% 22%;
 
     --primary: 220 15% 95%;
-    --primary-foreground: 220 20% 10%;
+    --primary-foreground: 222 17% 18%;
 
-    --secondary: 220 15% 15%;
+    --secondary: 223 17% 15%;
     --secondary-foreground: 220 15% 95%;
 
-    --accent: 220 15% 15%;
+    --accent: 223 17% 15%;
     --accent-foreground: 220 15% 95%;
 
     --destructive: 0 70% 35%;
     --destructive-foreground: 0 85% 95%;
 
-    --ring: 220 15% 20%;
+    --ring: 223 17% 22%;
   }
 }