diff --git a/sketch/html/index.html b/sketch/html/index.html
index 9906ea9..2b96f80 100644
--- a/sketch/html/index.html
+++ b/sketch/html/index.html
@@ -2,122 +2,133 @@
 <html>
 <title>Sketch HambiMap</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="w3.css">
 <script>
-	function switch_modal(id){
-		var modals=document.getElementsByClassName('w3-modal');
-		for(var i = 0; i < modals.length; ++i){
-			modals[i].style.display = 'none';
-		}
-		if (id!='none'){
-			document.getElementById(id).style.display='block';
-		}
+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 class="w3-container">
-  <h2>W3.CSS Modal</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>
-<button class="w3-button"><a href="user_form.html">Register</a></button>
-<button class="w3-button"><a href="login_form.html">Login</a></button>
+<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" id="site_body">
+	<h2>W3.CSS Modal</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>
 
-<!-- The 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> 
-<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>
 
 </body>
