diff --git a/PoinCloudWeb.Web/public/stylesheets/map.css b/PoinCloudWeb.Web/public/stylesheets/map.css
index 680e8b8..b20ab76 100644
--- a/PoinCloudWeb.Web/public/stylesheets/map.css
+++ b/PoinCloudWeb.Web/public/stylesheets/map.css
@@ -4,22 +4,23 @@
 #map-settings {
     grid-area: right;
     border-left: 1px solid black;
-    height: 100vw;
+    height: 100%;
     padding: 0px;
+    overflow-y: auto
 }
 
 #map {
     grid-area: main;
+    overflow-y: auto
 }
 
 
 .map-grid-container {
     display: grid;
     grid-template-areas:
-      'header header header header header header'
-      'main main main main main right'
-      'footer footer footer footer footer footer';
-    height: 100vw;
+      'main right';
+    grid-template-columns: calc(100vw - 200px)  200px;
+    height: calc(100vh - 2em - 20px - 1px); /*viewport height - height of navbar-button - padding - borderline*/
     grid-gap: 0px;
     padding: 0px;
 }
diff --git a/PoinCloudWeb.Web/views/map.pug b/PoinCloudWeb.Web/views/map.pug
index 87a051a..2804cc8 100644
--- a/PoinCloudWeb.Web/views/map.pug
+++ b/PoinCloudWeb.Web/views/map.pug
@@ -10,7 +10,10 @@ block content
 	div.map-grid-container
 		div#map-settings
 			ul
-				li Item 1
-				li Item 2
+				each val in [1, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7]
+					li= val
 		div(id="map", class="content-padding")
 			p content
+			ul
+				each val in [1, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7]
+					li= val