diff --git a/frontend/wheretogo/src/App.vue b/frontend/wheretogo/src/App.vue
index 43237c4..e78bfe6 100644
--- a/frontend/wheretogo/src/App.vue
+++ b/frontend/wheretogo/src/App.vue
@@ -1,6 +1,7 @@
 <template>
-  <div id="app" class="app">
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="height: 7vh">
       <div class="container-fluid">
         <a class="navbar-brand" href="/">WhereToGo</a>
         <div class="collapse navbar-collapse" id="navbarNavDropdown">
@@ -33,10 +34,12 @@
         </div>
       </div>
     </nav>
-    <div class="container">
+
+
+    <div class="container-fluid m-0 p-0" style="height: 93vh">
       <router-view />
     </div>
-  </div>
+  </body>
 </template>
 
 <script>
diff --git a/frontend/wheretogo/src/components/MapPage.vue b/frontend/wheretogo/src/components/MapPage.vue
index bee8256..59cfad6 100644
--- a/frontend/wheretogo/src/components/MapPage.vue
+++ b/frontend/wheretogo/src/components/MapPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <l-map style="height: 300px" :zoom="zoom" :center="center">
+  <l-map :zoom="zoom" :center="center" style='width: 80vw'>
     <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
     <l-marker :lat-lng="markerLatLng"></l-marker>
   </l-map>
