5 files changed, 15 insertions, 15 deletions
diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index 7de30ded..db17dd4a 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -58,7 +58,10 @@ export default function Editor() {
       <div className="h-screen w-screen flex flex-col bg-background overflow-hidden">
         <EditorHeader />
         <div className="flex-1 min-h-0 min-w-0">
-          <ResizablePanelGroup direction="vertical" className="h-full w-full">
+          <ResizablePanelGroup
+            direction="vertical"
+            className="h-full w-full gap-1"
+          >
             <ResizablePanel
               defaultSize={mainContent}
               minSize={30}
@@ -69,7 +72,7 @@ export default function Editor() {
               {/* Main content area */}
               <ResizablePanelGroup
                 direction="horizontal"
-                className="h-full w-full"
+                className="h-full w-full gap-1 px-2"
               >
                 {/* Tools Panel */}
                 <ResizablePanel
@@ -96,7 +99,6 @@ export default function Editor() {
 
                 <ResizableHandle withHandle />
 
-                
                 <ResizablePanel
                   defaultSize={propertiesPanel}
                   minSize={15}
@@ -117,7 +119,7 @@ export default function Editor() {
               minSize={15}
               maxSize={70}
               onResize={setTimeline}
-              className="min-h-0"
+              className="min-h-0 px-2 pb-2"
             >
               <Timeline />
             </ResizablePanel>
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 1d41696c..2f7158cc 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -39,7 +39,7 @@
     --sidebar-ring: 0 0% 3.9%;
   }
   .dark {
-    --background: 0 0% 8%;
+    --background: 0 0% 4%;
     --foreground: 0 0% 89%;
     --card: 0 0% 14.9%;
     --card-foreground: 0 0% 98%;
@@ -71,6 +71,8 @@
     --sidebar-accent-foreground: 0 0% 98%;
     --sidebar-border: 0 0% 14.9%;
     --sidebar-ring: 0 0% 83.1%;
+    --panel-background: 0 0% 11%;
+    --panel-accent: 0 0% 15%;
   }
 }
 
@@ -80,5 +82,7 @@
   }
   body {
     @apply bg-background text-foreground;
+    /* Prevent back/forward swipe */
+    overscroll-behavior-x: contain;
   }
 }
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 6dd74b89..cb026566 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,4 +1,3 @@
-import { Inter } from "next/font/google";
 import { ThemeProvider } from "next-themes";
 import { Analytics } from "@vercel/analytics/react";
 import Script from "next/script";
@@ -8,11 +7,7 @@ import { TooltipProvider } from "../components/ui/tooltip";
 import { DevelopmentDebug } from "../components/development-debug";
 import { StorageProvider } from "../components/storage-provider";
 import { baseMetaData } from "./metadata";
-
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-inter",
-});
+import { defaultFont } from "../lib/font-config";
 
 export const metadata = baseMetaData;
 
@@ -23,8 +18,8 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={`${inter.variable} font-sans antialiased`}>
-        <ThemeProvider attribute="class" forcedTheme="dark" enableSystem>
+      <body className={`${defaultFont.className} font-sans antialiased`}>
+        <ThemeProvider attribute="class" forcedTheme="dark">
           <TooltipProvider>
             <StorageProvider>{children}</StorageProvider>
             <Analytics />
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index f78e9d52..74308470 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -2,7 +2,6 @@ import { Hero } from "@/components/landing/hero";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
 import { getWaitlistCount } from "@/lib/waitlist";
-import Image from "next/image";
 
 // Force dynamic rendering so waitlist count updates in real-time
 export const dynamic = "force-dynamic";
diff --git a/apps/web/src/app/why-not-capcut/page.tsx b/apps/web/src/app/why-not-capcut/page.tsx
index 2491b70b..56b3d27a 100644
--- a/apps/web/src/app/why-not-capcut/page.tsx
+++ b/apps/web/src/app/why-not-capcut/page.tsx
@@ -2,7 +2,7 @@ import { Header } from "@/components/header";
 
 export default function WhyNotCapcut() {
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen bg-background px-5">
       <Header />
 
       <main className="relative mt-12">