diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index dc565df..cc9fb43 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -29,48 +29,48 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --background: 45 100% 97%;
+    --foreground: 24 33% 14%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 24 33% 14%;
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --popover-foreground: 24 33% 14%;
+    --primary: 34 92% 52%;
+    --primary-foreground: 45 100% 97%;
+    --secondary: 36 45% 92%;
+    --secondary-foreground: 24 33% 14%;
+    --muted: 36 33% 94%;
+    --muted-foreground: 24 10% 42%;
+    --accent: 29 60% 90%;
+    --accent-foreground: 24 33% 14%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 221.2 83.2% 53.3%;
+    --border: 31 28% 84%;
+    --input: 31 28% 84%;
+    --ring: 34 92% 52%;
     --radius: 0.5rem;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    --background: 24 33% 10%;
+    --foreground: 45 100% 96%;
+    --card: 24 29% 14%;
+    --card-foreground: 45 100% 96%;
+    --popover: 24 29% 14%;
+    --popover-foreground: 45 100% 96%;
+    --primary: 34 92% 52%;
+    --primary-foreground: 24 33% 10%;
+    --secondary: 24 20% 20%;
+    --secondary-foreground: 45 100% 96%;
+    --muted: 24 18% 18%;
+    --muted-foreground: 28 15% 66%;
+    --accent: 24 20% 20%;
+    --accent-foreground: 45 100% 96%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 224.3 76.3% 48%;
+    --border: 24 18% 24%;
+    --input: 24 18% 24%;
+    --ring: 34 92% 52%;
   }
 }
 
@@ -81,5 +81,8 @@
   body {
     background-color: hsl(var(--background));
     color: hsl(var(--foreground));
+    background-image:
+      radial-gradient(circle at top, rgba(255, 188, 66, 0.10), transparent 34%),
+      radial-gradient(circle at bottom right, rgba(122, 69, 22, 0.08), transparent 28%);
   }
 }
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 497a1c2..ca95fb3 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -8,8 +8,8 @@ export default function LandingPage() {
   return (
     <div className="min-h-screen bg-background flex flex-col selection:bg-primary selection:text-primary-foreground">
       {/* Grid Pattern Overlay */}
-      <div className="fixed inset-0 z-0 opacity-[0.03] pointer-events-none" 
-           style={{ backgroundImage: 'radial-gradient(circle at 2px 2px, white 1px, transparent 0)', backgroundSize: '40px 40px' }} />
+      <div className="fixed inset-0 z-0 opacity-[0.08] pointer-events-none"
+           style={{ backgroundImage: 'radial-gradient(circle at 2px 2px, rgba(217, 119, 6, 0.6) 1px, transparent 0)', backgroundSize: '42px 42px' }} />
       
       {/* Header */}
       <header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur-md">
@@ -72,11 +72,11 @@ export default function LandingPage() {
           </div>
           
           {/* Abstract background element */}
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-primary/5 blur-[120px] rounded-full -z-10 pointer-events-none" />
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-primary/15 blur-[120px] rounded-full -z-10 pointer-events-none" />
         </section>
 
         {/* Features Section */}
-        <section id="features" className="py-24 border-y bg-muted/30">
+        <section id="features" className="py-24 border-y bg-amber-50/80 dark:bg-stone-950/40">
           <div className="container mx-auto px-4">
             <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
               <div className="space-y-4 p-6 rounded-2xl bg-background border transition-all hover:shadow-xl hover:-translate-y-1">
@@ -162,7 +162,7 @@ export default function LandingPage() {
       </main>
 
       {/* Footer */}
-      <footer className="border-t py-12 bg-muted/20">
+      <footer className="border-t py-12 bg-amber-100/60 dark:bg-stone-950/70">
         <div className="container mx-auto px-4">
           <div className="flex flex-col md:flex-row justify-between items-center gap-8">
             <div className="flex items-center gap-2 grayscale opacity-50">