diff --git a/src/app/page.tsx b/src/app/page.tsx
index 188ed440..2644c7ba 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,7 +3,7 @@ import Footer from "@/components/Footer";
 
 export default function Home() {
   return (
-    <>
+    <div className="min-h-screen flex flex-col bg-[var(--bg)]">
       <a
         href="https://github.com/magic-peach/reframe"
         target="_blank"
@@ -14,11 +14,11 @@ export default function Home() {
         ⭐ Star on GitHub
       </a>
 
-      <main id="main-content" tabIndex={-1}>
+      <main id="main-content" tabIndex={-1} className="flex-1">
         <VideoEditor />
       </main>
 
       <Footer />
-    </>
+    </div>
   );
 }
diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index a12c1f41..b6544557 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -350,7 +350,7 @@ return () => {
   }, [videoSrc]);
 
   return (
-    <div className="min-h-screen relative flex flex-col" style={{ background: "var(--bg)" }}>
+    <div className="relative flex flex-col" style={{ background: "var(--bg)" }}>
       <ExportOverlay
         status={status}
         progress={progress}