diff --git a/admin/inertia/components/maps/MapComponent.tsx b/admin/inertia/components/maps/MapComponent.tsx
index f5e282e..dfcd6e7 100644
--- a/admin/inertia/components/maps/MapComponent.tsx
+++ b/admin/inertia/components/maps/MapComponent.tsx
@@ -3,10 +3,8 @@ import maplibregl from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import { Protocol } from 'pmtiles'
 import { useEffect } from 'react'
-import { useWindowSize } from 'usehooks-ts'
 
 export default function MapComponent() {
-  const { width = 0, height = 0 } = useWindowSize()
 
   // Add the PMTiles protocol to maplibre-gl
   useEffect(() => {
@@ -22,11 +20,8 @@ export default function MapComponent() {
       <Map
         reuseMaps
         style={{
-          width: width,
-          height: height - 175,
-          borderRadius: '5px',
-          boxShadow: '0 0 4px rgba(0,0,0,0.3)',
-          backgroundColor: '#fff',
+          width: '100%',
+          height: '100vh',
         }}
         mapStyle={`http://${window.location.hostname}:${window.location.port}/api/maps/styles`}
         mapLib={maplibregl}
@@ -36,8 +31,8 @@ export default function MapComponent() {
           zoom: 3.5,
         }}
       >
-        <NavigationControl />
-        <FullscreenControl />
+        <NavigationControl style={{ marginTop: '110px', marginRight: '36px' }} />
+        <FullscreenControl style={{ marginTop: '30px', marginRight: '36px' }} />
       </Map>
     </MapProvider>
   )
diff --git a/admin/inertia/pages/maps.tsx b/admin/inertia/pages/maps.tsx
index a18a35f..a065b7b 100644
--- a/admin/inertia/pages/maps.tsx
+++ b/admin/inertia/pages/maps.tsx
@@ -18,35 +18,40 @@ export default function Maps(props: {
   return (
     <MapsLayout>
       <Head title="Maps" />
-      <div className="flex border-b border-gray-900/10 p-4 justify-between">
-        <Link href="/home" className="flex items-center">
-          <IconArrowLeft className="mr-2" size={24} />
-          <p className="text-lg text-gray-600">Back to Home</p>
-        </Link>
-        <Link href="/settings/maps">
-          <StyledButton variant="primary" icon="IconSettings">
-            Manage Map Regions
-          </StyledButton>
-        </Link>
-      </div>
-      <div className="w-full min-h-screen flex flex-col items-center justify-center py-4 mx-4">
+      <div className="relative w-full h-screen overflow-hidden">
+        {/* Nav and alerts are overlayed */}
+        <div className="absolute top-0 left-0 right-0 z-50 flex justify-between p-4 bg-gray-50 backdrop-blur-sm shadow-sm">
+          <Link href="/home" className="flex items-center">
+            <IconArrowLeft className="mr-2" size={24} />
+            <p className="text-lg text-gray-600">Back to Home</p>
+          </Link>
+          <Link href="/settings/maps" className='mr-4'>
+            <StyledButton variant="primary" icon="IconSettings">
+              Manage Map Regions
+            </StyledButton>
+          </Link>
+        </div>
         {alertMessage && (
-          <AlertWithButton
-            title={alertMessage}
-            type="warning"
-            variant="solid"
-            className="w-full !mb-4"
-            buttonProps={{
-              variant: 'secondary',
-              children: 'Go to Map Settings',
-              icon: 'IconSettings',
-              onClick: () => {
-                window.location.href = '/settings/maps'
-              },
-            }}
-          />
+          <div className="absolute top-20 left-4 right-4 z-50">
+            <AlertWithButton
+              title={alertMessage}
+              type="warning"
+              variant="solid"
+              className="w-full"
+              buttonProps={{
+                variant: 'secondary',
+                children: 'Go to Map Settings',
+                icon: 'IconSettings',
+                onClick: () => {
+                  window.location.href = '/settings/maps'
+                },
+              }}
+            />
+          </div>
         )}
-        <MapComponent />
+        <div className="absolute inset-0">
+          <MapComponent />
+        </div>
       </div>
     </MapsLayout>
   )
diff --git a/admin/package-lock.json b/admin/package-lock.json
index dc343d9..ad30aa5 100644
--- a/admin/package-lock.json
+++ b/admin/package-lock.json
@@ -67,7 +67,6 @@
         "tar": "^7.5.6",
         "tesseract.js": "^7.0.0",
         "url-join": "^5.0.0",
-        "usehooks-ts": "^3.1.1",
         "yaml": "^2.8.0"
       },
       "devDependencies": {
@@ -9933,12 +9932,6 @@
       "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
       "license": "MIT"
     },
-    "node_modules/lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "license": "MIT"
-    },
     "node_modules/lodash.defaults": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
@@ -14616,21 +14609,6 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/usehooks-ts": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.1.tgz",
-      "integrity": "sha512-I4diPp9Cq6ieSUH2wu+fDAVQO43xwtulo+fKEidHUwZPnYImbtkTjzIJYcDcJqxgmX31GVqNFURodvcgHcW0pA==",
-      "license": "MIT",
-      "dependencies": {
-        "lodash.debounce": "^4.0.8"
-      },
-      "engines": {
-        "node": ">=16.15.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0  || ^17 || ^18 || ^19 || ^19.0.0-rc"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/admin/package.json b/admin/package.json
index b63d68b..73a6160 100644
--- a/admin/package.json
+++ b/admin/package.json
@@ -119,7 +119,6 @@
     "tar": "^7.5.6",
     "tesseract.js": "^7.0.0",
     "url-join": "^5.0.0",
-    "usehooks-ts": "^3.1.1",
     "yaml": "^2.8.0"
   },
   "hotHook": {
