diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1580cfb..eb28c9a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import "./globals.css";
 import type { Metadata } from "next";
+import { ModeToggle } from "@/components/mode-toggle";
 import { ThemeProvider } from "@/components/theme-provider";
 
 export const metadata: Metadata = {
@@ -14,14 +15,19 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className="antialiased">
+      <body className="h-screen flex flex-col antialiased">
         <ThemeProvider
           attribute="class"
           defaultTheme="system"
           enableSystem
           disableTransitionOnChange
         >
-          {children}
+          <header className="h-14 flex items-center justify-end px-8 border-b">
+            <ModeToggle />
+          </header>
+          <main className="flex-1">
+            {children}
+          </main>
         </ThemeProvider>
       </body>
     </html>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index b231c72..07abf38 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,15 +1,5 @@
 import CodeEditor from "@/components/code-editor";
-import { ModeToggle } from "@/components/mode-toggle";
 
 export default function Home() {
-  return (
-    <div className="h-screen flex flex-col">
-      <header className="h-14 flex items-center justify-end px-8 border-b">
-        <ModeToggle />
-      </header>
-      <div className="flex-1">
-        <CodeEditor />
-      </div>
-    </div>
-  );
+  return <CodeEditor />;
 }
