diff --git a/client/src/index.css b/client/src/index.css
index 112e03f..3cb9785 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-html { height: 100%; overflow: hidden; }
+html { height: 100%; overflow: hidden; background-color: var(--bg-primary); }
 body { height: 100%; overflow: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch; }
 
 .atlas-tooltip {
diff --git a/client/src/pages/TripPlannerPage.jsx b/client/src/pages/TripPlannerPage.jsx
index 4430310..4fdbd75 100644
--- a/client/src/pages/TripPlannerPage.jsx
+++ b/client/src/pages/TripPlannerPage.jsx
@@ -277,7 +277,7 @@ export default function TripPlannerPage() {
   if (!trip) return null
 
   return (
-    <div style={{ height: '100vh', display: 'flex', flexDirection: 'column', overflow: 'hidden', ...fontStyle }}>
+    <div style={{ position: 'fixed', inset: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden', ...fontStyle }}>
       <Navbar tripTitle={trip.title} tripId={tripId} showBack onBack={() => navigate('/dashboard')} onShare={() => setShowMembersModal(true)} />
 
       <div style={{