diff --git a/src/Components/AppShell/AppShell.tsx b/src/Components/AppShell/AppShell.tsx
index e15fb2ca..f8b050fc 100644
--- a/src/Components/AppShell/AppShell.tsx
+++ b/src/Components/AppShell/AppShell.tsx
@@ -46,9 +46,11 @@ export function AppShell({ appName, children, assetsApi }: { appName: string, ch
                                                             draggable
                                                             pauseOnHover
                                                             theme="light" />
-                                                        <NavBar appName={appName}></NavBar>
-                                                        <div id="app-content" className="tw-flex tw-!pl-[77px]">
-                                                            {children}
+                                                        <div className='tw-flex tw-flex-col tw-h-full'>
+                                                            <NavBar appName={appName}></NavBar>
+                                                            <div id="app-content" className="tw-flex-grow">
+                                                                {children}
+                                                            </div>
                                                         </div>
                                                     </QuestsProvider>
                                                 </ClusterRefProvider>
diff --git a/src/Components/AppShell/Content.tsx b/src/Components/AppShell/Content.tsx
index 4c463756..3631f58a 100644
--- a/src/Components/AppShell/Content.tsx
+++ b/src/Components/AppShell/Content.tsx
@@ -6,7 +6,7 @@ type ContentProps = {
 
 export function Content({children} : ContentProps) {
   return (
-    <div className='tw-flex tw-flex-col tw-w-full tw-bg-base-200 tw-relative'>
+    <div className='tw-flex tw-flex-col tw-w-full tw-h-full tw-bg-base-200 tw-relative'>
       {children}
     </div>
 
diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx
index 6e7de1a8..e8780036 100644
--- a/src/Components/Map/UtopiaMap.tsx
+++ b/src/Components/Map/UtopiaMap.tsx
@@ -75,7 +75,7 @@ function UtopiaMap({
 
     return (
         <>
-            <div className={(selectNewItemPosition != null ? "crosshair-cursor-enabled" : undefined)}>
+            <div className={`tw-h-full ${(selectNewItemPosition != null ? "crosshair-cursor-enabled" : undefined)}`}>
                 <MapContainer ref={mapDivRef} style={{ height: height, width: width }} center={new LatLng(center[0], center[1])} zoom={zoom} zoomControl={false} maxZoom={19}>
                     <Outlet></Outlet>
                     <Control position='topLeft' zIndex="1000">