diff --git a/src/components/BentoSpotify.tsx b/src/components/BentoSpotify.tsx
index 9de97d2..bb625bc 100644
--- a/src/components/BentoSpotify.tsx
+++ b/src/components/BentoSpotify.tsx
@@ -34,7 +34,7 @@ export default function BentoSpotify() {
 
   if (isLoading) {
     return (
-      <div className="relative h-full w-full overflow-hidden rounded-lg bg-gradient-to-br from-green-500/10 to-green-600/5">
+      <div className="relative h-full w-full overflow-hidden rounded-lg bg-gradient-to-br from-primary/10 to-primary/5">
         {/* Background Pattern */}
         <div className="absolute inset-0 opacity-5">
           <div className="h-full w-full bg-[radial-gradient(circle_at_20%_80%,_theme(colors.green.500)_0%,_transparent_50%)]"></div>
@@ -42,7 +42,7 @@ export default function BentoSpotify() {
         
         {/* Spotify Logo */}
         <div className="absolute right-3 top-3 z-10">
-          <FaSpotify size={24} className="text-green-500" />
+          <FaSpotify size={24} className="text-primary" />
         </div>
 
         <div className="relative z-10 flex h-full flex-col p-4">
@@ -78,21 +78,21 @@ export default function BentoSpotify() {
   const { name: song, artist, album, image, url } = displayData
 
   return (
-  <div className="relative h-full w-full overflow-hidden rounded-lg bg-gradient-to-br from-green-500/10 to-green-600/5">
+  <div className="relative h-full w-full overflow-hidden rounded-lg bg-gradient-to-br from-primary/10 to-primary/5">
     {/* Background Pattern */}
     <div className="absolute inset-0 opacity-5">
-      <div className="h-full w-full bg-[radial-gradient(circle_at_20%_80%,_theme(colors.green.500)_0%,_transparent_50%)]"></div>
+      <div className="h-full w-full bg-[radial-gradient(circle_at_20%_80%,_theme(colors.primary)_0%,_transparent_50%)]"></div>
     </div>
     
     {/* Spotify Logo */}
     <div className="absolute right-3 top-3 z-10">
-      <FaSpotify size={24} className="text-green-500" />
+      <FaSpotify size={24} className="text-primary" />
     </div>
 
     <div className="relative z-10 flex h-full flex-col p-4">
       {/* Header */}
       <div className="mb-4 flex items-center gap-2">
-        <div className="flex h-2 w-2 rounded-full bg-green-500 animate-pulse"></div>
+        <div className="flex h-2 w-2 rounded-full bg-primary animate-pulse"></div>
         <span className="text-xs font-medium text-muted-foreground">
           {displayData['@attr']?.nowplaying === 'true'
             ? 'NOW PLAYING'
@@ -111,7 +111,7 @@ export default function BentoSpotify() {
             className="h-16 w-16 rounded-lg border shadow-lg"
           />
           {displayData['@attr']?.nowplaying === 'true' && (
-            <div className="absolute -bottom-1 -right-1 h-4 w-4 rounded-full bg-green-500 border-2 border-background"></div>
+            <div className="absolute -bottom-1 -right-1 h-4 w-4 rounded-full bg-primary border-2 border-background"></div>
           )}
         </div>
 
@@ -132,7 +132,7 @@ export default function BentoSpotify() {
       <div className="mt-4 flex items-center justify-between">
         <div className="flex items-center gap-1">
           <div className="h-1 w-8 rounded-full bg-muted">
-            <div className="h-full rounded-full bg-green-500"></div>
+            <div className="h-full rounded-full bg-primary"></div>
           </div>
         </div>
         
diff --git a/src/styles/global.css b/src/styles/global.css
index 6e33c7f..2aed97c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -52,35 +52,41 @@
 }
 
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --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);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --background: #faf4ed;
+  --foreground: #575279;
+  --primary: #286983;
+  --primary-foreground: #faf4ed;
+  --secondary: #f2e9e1;
+  --secondary-foreground: #575279;
+  --muted: #f2e9e1;
+  --muted-foreground: #797593;
+  --accent: #d7827e;
+  --accent-foreground: #575279;
+  --additive: #56949f;
+  --additive-foreground: #faf4ed;
+  --destructive: #b4637a;
+  --destructive-foreground: #faf4ed;
+  --border: #dfdad9;
+  --ring: #907aa9;
 }
 
 [data-theme="dark"] {
-  --background: oklch(0.145 0 0);
-  --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);
-  --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);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --ring: oklch(0.556 0 0);
+  --background: #191724;
+  --foreground: #e0def4;
+  --primary: #c4a7e7;
+  --primary-foreground: #191724;
+  --secondary: #26233a;
+  --secondary-foreground: #e0def4;
+  --muted: #26233a;
+  --muted-foreground: #908caa;
+  --accent: #eb6f92;
+  --accent-foreground: #e0def4;
+  --additive: #9ccfd8;
+  --additive-foreground: #191724;
+  --destructive: #eb6f92;
+  --destructive-foreground: #e0def4;
+  --border: #403d52;
+  --ring: #6e6a86;
 }
 
 @layer base {