diff --git a/app/page.tsx b/app/page.tsx
index e536a2d2..ed27c76e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,6 +4,7 @@ import { Podcast } from "@/components/podcast";
 import { CalendarWidget } from "@/components/calendar-widget";
 import { News } from "@/components/news";
 import { Todo } from "@/components/todo";
+import { BackgroundSwitcher } from "@/components/background-switcher";
 
 export const metadata = {
   title: "Enkun - Dashboard",
@@ -11,23 +12,27 @@ export const metadata = {
 
 export default function DashboardPage() {
   return (
-    <div className="container mx-auto px-4 pt-12 pb-4">
-      <div className='grid grid-cols-12 gap-4'>
-        <div className='col-span-3'>
-          <QuoteCard />
-          <div className='mt-4'>
-            <News />
+    <BackgroundSwitcher>
+      <main className="w-full h-screen">
+        <div className="w-full h-full px-4 pt-12 pb-4">
+          <div className='grid grid-cols-12 gap-4'>
+            <div className='col-span-3'>
+              <QuoteCard />
+              <div className='mt-4'>
+                <News />
+              </div>
+            </div>
+            <div className='col-span-6'>
+              <Messages />
+            </div>
+            <div className='col-span-3 space-y-4'>
+              <Podcast />
+              <CalendarWidget />
+              <Todo />
+            </div>
           </div>
         </div>
-        <div className='col-span-6'>
-          <Messages />
-        </div>
-        <div className='col-span-3 space-y-4'>
-          <Podcast />
-          <CalendarWidget />
-          <Todo />
-        </div>
-      </div>
-    </div>
+      </main>
+    </BackgroundSwitcher>
   );
 }