diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index d26c08d..ef30f4a 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -179,7 +179,7 @@ export default function DesignStudioPage() {
       {/* Loading Overlay */}
       {isGenerating && (
         <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center">
-          <div className="bg-white dark:bg-gray-900 rounded-lg p-8 shadow-xl max-w-sm mx-4">
+          <div className="bg-card rounded-lg p-8 shadow-xl max-w-sm mx-4 border">
             <div className="flex flex-col items-center space-y-4">
               <div className="relative">
                 <Loader2 className="w-12 h-12 text-blue-600 animate-spin" />
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index fee4649..53255e0 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -29,13 +29,14 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background text-foreground`}
       >
         <ThemeProvider
           attribute="class"
           defaultTheme="system"
           enableSystem
-          disableTransitionOnChange
+          disableTransitionOnChange={false}
+          storageKey="design-buddy-theme"
         >
           <SiteHeader />
           {children}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9a49a16..f657278 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,7 +11,7 @@ export default function LandingPage() {
   return (
     <main className="flex-1">
       {/* Hero Section */}
-      <section className="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
+      <section className="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-background to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
         <div className="container mx-auto px-4 py-20">
           <div className="max-w-6xl mx-auto text-center space-y-8">
             <div className="space-y-6">
@@ -62,7 +62,7 @@ export default function LandingPage() {
       </section>
 
       {/* Features Section */}
-      <section className="py-20 bg-white dark:bg-gray-900">
+      <section className="py-20 bg-background">
         <div className="container mx-auto px-4">
           <div className="max-w-6xl mx-auto">
             <div className="text-center mb-16">
@@ -108,7 +108,7 @@ export default function LandingPage() {
       </section>
 
       {/* Room Types Section */}
-      <section className="py-20 bg-gray-50 dark:bg-gray-800">
+      <section className="py-20 bg-muted/50">
         <div className="container mx-auto px-4">
           <div className="max-w-6xl mx-auto">
             <div className="text-center mb-16">
@@ -129,7 +129,7 @@ export default function LandingPage() {
                 { name: "Nursery", icon: "👶" },
                 { name: "Outdoor", icon: "🌳" },
               ].map((room) => (
-                <div key={room.name} className="text-center p-6 rounded-lg bg-white dark:bg-gray-900 shadow-sm hover:shadow-md transition-shadow">
+                <div key={room.name} className="text-center p-6 rounded-lg bg-card shadow-sm hover:shadow-md transition-shadow">
                   <div className="text-4xl mb-2">{room.icon}</div>
                   <h3 className="font-medium">{room.name}</h3>
                 </div>
@@ -140,7 +140,7 @@ export default function LandingPage() {
       </section>
 
       {/* Design Styles Section */}
-      <section className="py-20 bg-white dark:bg-gray-900">
+      <section className="py-20 bg-background">
         <div className="container mx-auto px-4">
           <div className="max-w-6xl mx-auto">
             <div className="text-center mb-16">
diff --git a/src/components/site-footer.tsx b/src/components/site-footer.tsx
index 9ce3654..e491c30 100644
--- a/src/components/site-footer.tsx
+++ b/src/components/site-footer.tsx
@@ -2,7 +2,7 @@ import { Palette } from "lucide-react";
 
 export function SiteFooter() {
   return (
-    <footer className="border-t bg-gray-50 dark:bg-gray-900 py-8">
+    <footer className="border-t bg-muted/50 py-8">
       <div className="container mx-auto px-4">
         <div className="flex flex-col items-center space-y-4">
           <div className="flex items-center gap-2">
diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index 86d6ada..4ebde3d 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -5,7 +5,7 @@ import { Palette } from "lucide-react";
 
 export function SiteHeader() {
   return (
-    <header className="border-b bg-white/95 dark:bg-gray-900/95 backdrop-blur supports-[backdrop-filter]:bg-white/60">
+    <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="container mx-auto px-4 py-4 flex justify-between items-center">
         <h1 className="text-2xl font-bold">
           <Link
