diff --git a/sketch/html/barrio_view.html b/sketch/html/barrio_view.html
index e69de29..75b74ce 100644
--- a/sketch/html/barrio_view.html
+++ b/sketch/html/barrio_view.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html>
+</html>
+
diff --git a/sketch/html/comment_form.html b/sketch/html/comment_form.html
index e69de29..75b74ce 100644
--- a/sketch/html/comment_form.html
+++ b/sketch/html/comment_form.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html>
+</html>
+
diff --git a/sketch/html/gallery.html b/sketch/html/gallery.html
index e69de29..75b74ce 100644
--- a/sketch/html/gallery.html
+++ b/sketch/html/gallery.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html>
+</html>
+
diff --git a/sketch/html/house_form.html b/sketch/html/house_form.html
index e69de29..75b74ce 100644
--- a/sketch/html/house_form.html
+++ b/sketch/html/house_form.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html>
+</html>
+
diff --git a/sketch/html/main_with_sidebar.html b/sketch/html/main_with_sidebar.html
index 473b3c3..de5055b 100644
--- a/sketch/html/main_with_sidebar.html
+++ b/sketch/html/main_with_sidebar.html
@@ -1,152 +1,46 @@
 <!DOCTYPE html>
 <html>
+		<head>
 <title>Sketch HambiMap</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="w3.css">
 <link rel="stylesheet" href="style.css">
-<link rel="stylesheet" href="leaflet/leaflet-sidebar-v2/css/leaflet-sidebar.css">
-<!--leaflet from CDN
-<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
-     crossorigin=""/>
-<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
-     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
-     crossorigin=""></script>-->
+<link href="fontawesome/5.3.1/css/all.css" rel="stylesheet">
 <!--self-served leaflet-->
 <link rel="stylesheet" href="leaflet/Leaflet-1.9.4/leaflet.css">
-<!--integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="-->
+<link rel="stylesheet" href="leaflet/leaflet-sidebar-v2/css/leaflet-sidebar.css">
+		</head>
+<body>
+	<div id="sidebar" class="leaflet-sidebar collapsed">
+
+        <!-- nav tabs -->
+        <div class="leaflet-sidebar-tabs">
+            <!-- top aligned tabs -->
+            <ul role="tablist">
+                <li><a href="#home" role="tab"><i class="fa fa-bars active"></i></a></li>
+                <li><a href="#autopan" role="tab"><i class="fa fa-arrows"></i></a></li>
+            </ul>
+        </div>
+
+        <!-- panel content -->
+        <div class="leaflet-sidebar-content">
+            <div class="leaflet-sidebar-pane" id="home">
+                <h1 class="leaflet-sidebar-header">
+                    HambiMap Sketch
+                    <span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span>
+                </h1>
+
+				<p>A map designed to collect histories of Hambi treehouses</p>
+			</div><!--sidebar-pane home-->
+		</div><!--sidebar-content-->
+	</div><!--sidebar-->
+
+<div id="map" style="height: 100vh;"></div>
+
 <script src="leaflet/Leaflet-1.9.4/leaflet.js">
 <!--integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="-->
 </script>
-<script href="leaflet/leaflet-sidebar-v2/js/leaflet-sidebar.js"></script>
-<script>
-var modals=document.getElementsByClassName('w3-modal');
-
-window.onclick = function(event) {
-	for(var j = 0; j < modals.length; ++j){
-	  if (event.target == modals[j]) {
-	    modals[j].style.display = "none";
-	  }
-	}
-}
-
-function switch_modal(id){
-	for(var i = 0; i < modals.length; ++i){
-		modals[i].style.display = 'none';
-	}
-	if (id!='none'){
-		document.getElementById(id).style.display='block';
-	}
-}
-</script>
-<body>
-
-<div id="modals">
-	<div id="modal_view_treehouse" class="w3-modal">
-	  <div class="w3-modal-content">
-	    <div class="w3-container">
-	      <span onclick="switch_modal('none');"
-	      class="w3-button w3-display-topright">&times;</span>
-	      <iframe src="treehouse_view.html"></iframe>
-	    </div>
-	  </div>
-	</div> 
-	<!-- The Modals -->
-	<div id="modal_view_tree" class="w3-modal">
-	  <div class="w3-modal-content">
-	    <div class="w3-container">
-	      <span onclick="switch_modal('none');"
-	      class="w3-button w3-display-topright">&times;</span>
-	      <iframe src="tree_view.html"></iframe>
-	    </div>
-	  </div>
-	</div> 
-	<div id="modal_view_barrio" class="w3-modal">
-	  <div class="w3-modal-content">
-	    <div class="w3-container">
-	      <span onclick="switch_modal('none');"
-	      class="w3-button w3-display-topright">&times;</span>
-	      <iframe src="barrio_view.html"></iframe>
-	    </div>
-	  </div>
-	</div> 
-	<div id="modal_form_treehouse" class="w3-modal">
-	  <div class="w3-modal-content">
-	    <div class="w3-container">
-	      <span onclick="switch_modal('none');"
-	      class="w3-button w3-display-topright">&times;</span>
-	      <iframe src="treehouse_form.html"></iframe>
-	    </div>
-	  </div>
-	</div> 
-	<div id="modal_form_tree" class="w3-modal">
-	  <div class="w3-modal-content">
-	    <div class="w3-container">
-	      <span onclick="switch_modal('none');"
-	      class="w3-button w3-display-topright">&times;</span>
-	      <iframe src="tree_form.html"></iframe>
-	    </div>
-	  </div>
-	</div> 
-	<div id="modal_form_barrio" class="w3-modal">
-	  <div class="w3-modal-content">
-	    <div class="w3-container">
-	      <span onclick="switch_modal('none');"
-	      class="w3-button w3-display-topright">&times;</span>
-	      <iframe src="barrio_form.html"></iframe>
-	    </div>
-	  </div>
-	</div> 
-	<div id="modal_form_story" class="w3-modal">
-	  <div class="w3-modal-content">
-	    <div class="w3-container">
-	      <span onclick="switch_modal('none');"
-	      class="w3-button w3-display-topright">&times;</span>
-	      <iframe src="story_form.html"></iframe>
-	    </div>
-	  </div>
-	</div> 
-	<div id="modal_form_photo" class="w3-modal">
-	  <div class="w3-modal-content">
-	    <div class="w3-container">
-	      <span onclick="switch_modal('none');"
-	      class="w3-button w3-display-topright">&times;</span>
-	      <iframe src="photo_form.html"></iframe>
-	    </div>
-	  </div>
-	</div> 
-	<div id="modal_form_comment" class="w3-modal">
-	  <div class="w3-modal-content">
-	    <div class="w3-container">
-	      <span onclick="switch_modal('none');"
-	      class="w3-button w3-display-topright">&times;</span>
-	      <iframe src="comment_form.html"></iframe>
-	    </div>
-	  </div>
-	<div id="modal_form_house" class="w3-modal">
-	  <div class="w3-modal-content">
-	    <div class="w3-container">
-	      <span onclick="switch_modal('none');"
-	      class="w3-button w3-display-topright">&times;</span>
-	      <iframe src="house_form.html"></iframe>
-	    </div>
-	  </div>
-	</div> 
-	</div> 
-</div>
-<div class="w3-container leaflet-sidebar collapsed" id="site_body">
-	<h2>Stories of Hambi</h2>
-	<!-- Trigger/Open the Modals -->
-	<button onclick="switch_modal('modal_view_treehouse')" class="w3-button">View Treehouse</button>
-	<button onclick="switch_modal('modal_view_barrio')" class="w3-button">View Barrio</button>
-	<button onclick="switch_modal('modal_view_tree')" class="w3-button">View Tree</button>
-	<button onclick="switch_modal('modal_form_treehouse')" class="w3-button">Add Treehouse</button>
-	<button onclick="switch_modal('modal_form_barrio')" class="w3-button">Add Barrio</button>
-	<a href="user_form.html" class="w3-button">Register</a>
-	<a href="login_form.html" class="w3-button">Login</a>
-</div>
-<div id="map" style="height: 100vh;"></div>
-
+<script src="leaflet/leaflet-sidebar-v2/js/leaflet-sidebar.js"></script>
 <script>
 var map = L.map('map').setView([50.880301, 6.560531], 13,);
 L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { minZoom: 12, maxZoom: 19, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' }).addTo(map);
@@ -156,10 +50,6 @@ var tree_markers = L.layerGroup();   //overlay where all tree(house) markers wil
 var test_tree_marker = L.marker([50.880301, 6.560531]).addTo(tree_markers);
 map.addLayer(tree_markers);
 
-var sidebar = L.control.sidebar({
-    container: 'site_body', // the DOM container or #ID of a predefined sidebar container that should be used
-}).addTo(map);
-
 
 function onMapClick(e){}      //for adding a tree(house)
 function onMapZoom(e){       //for deciding wether to show barrios or treehouses
@@ -177,10 +67,16 @@ function onMapMouseUp(e){}    //^^
 function onMapContextMenu(e){}//probably neat for something
 
 map.on('click', onMapClick);
-map.on('zoom', onMapZoom);
+map.on('zoomend', onMapZoom);
 map.on('mousedown', onMapMouseDown);
 map.on('mouseup', onMapMouseUp);
 map.on('contextMenu', onMapContextMenu);
+
+
+var sidebar = L.control.sidebar({
+    container: 'sidebar', // the DOM container or #ID of a predefined sidebar container that should be used
+}).addTo(map).open('home');
+
 </script>
 
 </body>
diff --git a/sketch/html/photo_form.html b/sketch/html/photo_form.html
index e69de29..0e76edd 100644
--- a/sketch/html/photo_form.html
+++ b/sketch/html/photo_form.html
@@ -0,0 +1 @@
+<!DOCTYPE html>
diff --git a/sketch/html/story_form.html b/sketch/html/story_form.html
index e69de29..bd54434 100644
--- a/sketch/html/story_form.html
+++ b/sketch/html/story_form.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+</html>
diff --git a/sketch/html/tree_view.html b/sketch/html/tree_view.html
index e69de29..bd54434 100644
--- a/sketch/html/tree_view.html
+++ b/sketch/html/tree_view.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+</html>
diff --git a/sketch/html/treehouse_teaser.html b/sketch/html/treehouse_teaser.html
index e69de29..75b74ce 100644
--- a/sketch/html/treehouse_teaser.html
+++ b/sketch/html/treehouse_teaser.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html>
+</html>
+
diff --git a/sketch/html/treehouse_view.html b/sketch/html/treehouse_view.html
index 991ffdf..d850a74 100644
--- a/sketch/html/treehouse_view.html
+++ b/sketch/html/treehouse_view.html
@@ -1 +1,4 @@
-Treehouse View
+<!DOCTYPE html>
+<html>
+	<h3>Treehouse View</h3>
+</html>
diff --git a/sketch/html/user_form.html b/sketch/html/user_form.html
index e69de29..75b74ce 100644
--- a/sketch/html/user_form.html
+++ b/sketch/html/user_form.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html>
+</html>
+
