diff --git a/depslist b/depslist
index f101d64..8a5e21c 100644
--- a/depslist
+++ b/depslist
@@ -2,6 +2,6 @@ leaflet.js http://cdn.leafletjs.com/leaflet-0.5/leaflet.js
 leaflet.css http://cdn.leafletjs.com/leaflet-0.5/leaflet.css
 leaflet.ie.css http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css
 jquery.js http://code.jquery.com/jquery-2.0.3.min.js
-bootstrap.css http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css
-bootstrap.js http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js
+bootstrap.css https://raw.github.com/twbs/bootstrap/3.0.0-wip/dist/css/bootstrap.min.css
+bootstrap.js https://raw.github.com/twbs/bootstrap/3.0.0-wip/dist/js/bootstrap.js
 leaflet.markercluster.js https://raw.github.com/Leaflet/Leaflet.markercluster/0.2/dist/leaflet.markercluster.js
diff --git a/res/web/css/style.css b/res/web/css/style.css
index 0c825b9..f1c64cf 100644
--- a/res/web/css/style.css
+++ b/res/web/css/style.css
@@ -1,17 +1,21 @@
 @charset "Utf-8";
 
 body {
-	font-family: 'Lucida Grande', "Helvetica Neue", Helvetica, Arial, sans-serif;
-	font-size: 16px;
+	font-family: Helvetica, sans-seirf;
+	font-size: 14px;
 	font-weight: 400;
-	line-height: 1.428571429;
-	color: #333333;
+	color: #333;
 }
 
 a.btn {
 	color: #FFF;
 }
 
+.btn {
+    font-size: 12px;
+    font-weight: 400;
+}
+
 #map {
 	width:100%;
 	height:700px;
@@ -21,6 +25,10 @@ a.close {
     opacity: .5;
 }
 
+li a.disabled {
+	color: #AAA;
+}
+
 .leaflet-control-geoloc {
 	background-image: url(/img/location.png);
 	-webkit-border-radius: 5px 5px 5px 5px;
@@ -64,10 +72,15 @@ textarea.contact {
 	font-weight: 900;
 }
 
+li.active a, li.open a {
+	background-color: rgba(255, 255, 255, 1) !important;
+}
+
 .navbar {
     position: absolute;
-    z-index: 2000;
+    z-index: 5000;
     width: 100%;
+	background-color: rgba(255, 255, 255, .8);
 }
 
 .leaflet-top {
@@ -95,25 +108,18 @@ textarea.contact {
 }
 
 #bringnavbarback {
+	display: none;
 	position: absolute;
 	z-index: 4000;
-	top: -50px;
+	top: 0px;
 	right: 50px;
-	background-color: rgba(233, 233, 233, .6);
+	background-color: rgba(255, 255, 255, .8);
 	padding: 10px;
 }
 
 #bringnavbarback:hover {
 	cursor: pointer;
-	background-color: rgba(233, 233, 233, 1);
-}
-
-a.light {
-	color: #AAA !important;	
-}
-
-a.light:hover {
-	color: #999 !important;	
+	background-color: rgba(255, 255, 255, 1);
 }
 
 #search {
@@ -205,299 +211,3 @@ a.light:hover {
 	-o-transition: -o-transform 0.25s ease-out, opacity 0.25s ease-in;
 	transition: transform 0.25s ease-out, opacity 0.25s ease-in;
 }
-
-/* ========== BOOTSTRAP FIXES ========== */
-
-select,
-textarea,
-input[type="text"],
-input[type="password"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="date"],
-input[type="month"],
-input[type="time"],
-input[type="week"],
-input[type="number"],
-input[type="email"],
-input[type="url"],
-input[type="search"],
-input[type="tel"],
-input[type="color"] {
-  display: block;
-  min-height: 38px;
-  padding: 8px 12px;
-  font-size: 14px;
-  line-height: 1.428571429;
-  color: #555555;
-  vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid #cccccc;
-  border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-     -moz-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-       -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-}
-
-select:focus,
-textarea:focus,
-input[type="text"]:focus,
-input[type="password"]:focus,
-input[type="datetime"]:focus,
-input[type="datetime-local"]:focus,
-input[type="date"]:focus,
-input[type="month"]:focus,
-input[type="time"]:focus,
-input[type="week"]:focus,
-input[type="number"]:focus,
-input[type="email"]:focus,
-input[type="url"]:focus,
-input[type="search"]:focus,
-input[type="tel"]:focus,
-input[type="color"]:focus {
-  border-color: rgba(82, 168, 236, 0.8);
-  outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-}
-
-select[disabled],
-textarea[disabled],
-input[type="text"][disabled],
-input[type="password"][disabled],
-input[type="datetime"][disabled],
-input[type="datetime-local"][disabled],
-input[type="date"][disabled],
-input[type="month"][disabled],
-input[type="time"][disabled],
-input[type="week"][disabled],
-input[type="number"][disabled],
-input[type="email"][disabled],
-input[type="url"][disabled],
-input[type="search"][disabled],
-input[type="tel"][disabled],
-input[type="color"][disabled],
-select[readonly],
-textarea[readonly],
-input[type="text"][readonly],
-input[type="password"][readonly],
-input[type="datetime"][readonly],
-input[type="datetime-local"][readonly],
-input[type="date"][readonly],
-input[type="month"][readonly],
-input[type="time"][readonly],
-input[type="week"][readonly],
-input[type="number"][readonly],
-input[type="email"][readonly],
-input[type="url"][readonly],
-input[type="search"][readonly],
-input[type="tel"][readonly],
-input[type="color"][readonly],
-fieldset[disabled] select,
-fieldset[disabled] textarea,
-fieldset[disabled] input[type="text"],
-fieldset[disabled] input[type="password"],
-fieldset[disabled] input[type="datetime"],
-fieldset[disabled] input[type="datetime-local"],
-fieldset[disabled] input[type="date"],
-fieldset[disabled] input[type="month"],
-fieldset[disabled] input[type="time"],
-fieldset[disabled] input[type="week"],
-fieldset[disabled] input[type="number"],
-fieldset[disabled] input[type="email"],
-fieldset[disabled] input[type="url"],
-fieldset[disabled] input[type="search"],
-fieldset[disabled] input[type="tel"],
-fieldset[disabled] input[type="color"] {
-  cursor: not-allowed;
-  background-color: #eeeeee;
-}
-
-input,
-select,
-textarea {
-  width: 100%;
-}
-
-input[type="file"],
-input[type="image"],
-input[type="submit"],
-input[type="reset"],
-input[type="button"],
-input[type="radio"],
-input[type="checkbox"] {
-  width: auto;
-}
-
-input[type="search"] {
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
-}
-
-textarea {
-  height: auto;
-}
-
-input[type="radio"],
-input[type="checkbox"] {
-  margin: 4px 0 0;
-  margin-top: 1px \9;
-  /* IE8-9 */
-
-  line-height: normal;
-}
-
-select,
-input[type="file"] {
-  height: 38px;
-  /* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */
-
-  line-height: 38px;
-}
-
-select[multiple],
-select[size] {
-  height: auto;
-}
-
-select optgroup {
-  font-family: inherit;
-  font-size: inherit;
-  font-style: inherit;
-}
-
-input[type="file"]:focus,
-input[type="radio"]:focus,
-input[type="checkbox"]:focus {
-  outline: thin dotted #333;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
-
-input[type="number"]::-webkit-outer-spin-button,
-input[type="number"]::-webkit-inner-spin-button {
-  height: auto;
-}
-
-input:-moz-placeholder,
-textarea:-moz-placeholder {
-  color: #999999;
-}
-
-input::-moz-placeholder,
-textarea::-moz-placeholder {
-  color: #999999;
-}
-
-input:-ms-input-placeholder,
-textarea:-ms-input-placeholder {
-  color: #999999;
-}
-
-input::-webkit-input-placeholder,
-textarea::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.radio,
-.checkbox {
-  display: block;
-  min-height: 20px;
-  padding-left: 20px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  vertical-align: middle;
-}
-
-.radio label,
-.checkbox label {
-  display: inline;
-  margin-bottom: 0;
-  font-weight: normal;
-  cursor: pointer;
-}
-
-.radio input[type="radio"],
-.radio-inline input[type="radio"],
-.checkbox input[type="checkbox"],
-.checkbox-inline input[type="checkbox"] {
-  float: left;
-  margin-left: -20px;
-}
-
-.radio + .radio,
-.checkbox + .checkbox {
-  margin-top: -5px;
-}
-
-/*
-// Move the options list down to align with labels
-.controls > .radio:first-child,
-.controls > .checkbox:first-child {
-  padding-top: 5px; // has to be padding because margin collapses
-}
-*/
-
-.radio-inline,
-.checkbox-inline {
-  display: inline-block;
-  padding-left: 20px;
-  margin-bottom: 0;
-  font-weight: normal;
-  vertical-align: middle;
-  cursor: pointer;
-}
-
-.radio-inline + .radio-inline,
-.checkbox-inline + .checkbox-inline {
-  margin-top: 0;
-  margin-left: 10px;
-}
-
-select.input-large,
-textarea.input-large,
-input[type="text"].input-large,
-input[type="password"].input-large,
-input[type="datetime"].input-large,
-input[type="datetime-local"].input-large,
-input[type="date"].input-large,
-input[type="month"].input-large,
-input[type="time"].input-large,
-input[type="week"].input-large,
-input[type="number"].input-large,
-input[type="email"].input-large,
-input[type="url"].input-large,
-input[type="search"].input-large,
-input[type="tel"].input-large,
-input[type="color"].input-large {
-  min-height: 56px;
-  padding: 14px 16px;
-  font-size: 18px;
-  border-radius: 6px;
-}
-
-select.input-small,
-textarea.input-small,
-input[type="text"].input-small,
-input[type="password"].input-small,
-input[type="datetime"].input-small,
-input[type="datetime-local"].input-small,
-input[type="date"].input-small,
-input[type="month"].input-small,
-input[type="time"].input-small,
-input[type="week"].input-small,
-input[type="number"].input-small,
-input[type="email"].input-small,
-input[type="url"].input-small,
-input[type="search"].input-small,
-input[type="tel"].input-small,
-input[type="color"].input-small {
-  min-height: 30px;
-  padding: 5px 10px;
-  font-size: 12px;
-  border-radius: 3px;
-}
\ No newline at end of file
diff --git a/res/web/img/marker-icon_light_gray.png b/res/web/img/inactive.png
similarity index 100%
rename from res/web/img/marker-icon_light_gray.png
rename to res/web/img/inactive.png
diff --git a/res/web/img/marker-icon_gray.png b/res/web/img/newUser.png
similarity index 100%
rename from res/web/img/marker-icon_gray.png
rename to res/web/img/newUser.png
diff --git a/res/web/img/marker-icon.png b/res/web/img/node.png
similarity index 100%
rename from res/web/img/marker-icon.png
rename to res/web/img/node.png
diff --git a/res/web/img/marker-shadow.png b/res/web/img/shadow.png
similarity index 100%
rename from res/web/img/marker-shadow.png
rename to res/web/img/shadow.png
diff --git a/res/web/img/vps.png b/res/web/img/vps.png
new file mode 100644
index 0000000..c6c2fdd
Binary files /dev/null and b/res/web/img/vps.png differ
diff --git a/res/web/index.html.tmpl b/res/web/index.html.tmpl
index 502ba16..d4af735 100644
--- a/res/web/index.html.tmpl
+++ b/res/web/index.html.tmpl
@@ -19,34 +19,85 @@
 		{{.Web.HeaderSnippet}}
 	</head>
 	<body>
-<div id="wrap">
-<div class="navbar">
-<div class="container">
-<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
-<span class="icon-bar"></span>
-<span class="icon-bar"></span>
-<span class="icon-bar"></span>
-</button>
-<a class="navbar-brand" href="/">{{.Name}}</a>
-<div class="nav-collapse collapse navbar-responsive-collapse">
-<ul class="nav navbar-nav">
-<li class="active"><a href="/">Map</a></li>
-<li><a href="/about/">About</a></li>
-</ul>
-<ul class="nav navbar-nav pull-right">
-	<li><a href="#" class="light" onclick="hide(); return false;">Hide</a></li>
-	<li><a href="#" onclick="geoLocate(); return false;">Locate Me</a></li>
-	<li><a href="#" onclick="initDistance();" id="distance" data-toggle="tooltip" data-placement="bottom" data-original-title="Click on the first node, and then the second node." >Calculate Distance</a></li>
-	<li><input type="text" id="search" placeholder="Search"/></li>
-	<li><a href="#" class="sm"></a></li>
-	<li><button href="#" onclick="initRegistration();" class="btn btn-primary navbar-btn" id="addme" data-toggle="tooltip" data-placement="bottom" data-original-title="Click anywhere to add your node!" >Add Node</button></li>
-</ul>
-</div> 
-</div> 
-</div>
-	<noscript><div class="alert alert-warning"><h1>Please enable Javascript</h1><p>This website requires javascript to be viewed properly.</p></noscript>
-		<div id="map"></div>
-	</div>
+		<div id="wrap">
+			<div class="navbar">
+				<div class="container">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand" href="/">{{.Name}}</a>
+					<div class="nav-collapse collapse navbar-responsive-collapse">
+						<ul class="nav navbar-nav">
+							<li class="active"><a href="/">Map</a></li>
+							<li><a href="/about/">About</a></li>
+						</ul>
+						<div class="hidden-sm">
+							<ul class="nav navbar-nav pull-right">
+								<li class="dropdown">
+									<a class="dropdown-toggle" data-toggle="dropdown" href="#">
+										Map
+										<b class="caret"></b>
+									</a>
+									<ul class="dropdown-menu" aria-labelledby="dropdownMenu" role="menu">
+										<li><a href="#" onclick="map.zoomIn(1); return false;">Zoom In</a></li>
+										<li><a href="#" onclick="map.zoomOut(1); return false;">Zoom Out</a></li>
+										<li class="divider"></li>
+										<li><a href="#" onclick="hide(); return false;">Hide Navbar</a></li>
+									</ul>
+								</li>
+								<li class="dropdown">
+									<a class="dropdown-toggle" data-toggle="dropdown" href="#">
+										Filter
+										<b class="caret"></b>
+									</a>
+									<ul class="dropdown-menu" aria-labelledby="dropdownMenu" role="menu">
+										<li><a href="#" onclick="onOff(); return false;" id="all_l" class="disabled">Off</a></li>
+										<li class="divider hidden" id="layer_1"></li>
+										<li><a href="#" onclick="activeNodes(); return false;" id="active_l" class="hidden disabled">Active Nodes</a></li>
+										<li><a href="#" onclick="potentialNodes(); return false;" id="potential_l" class="hidden disabled">Potential Nodes</a></li>
+										<li class="divider hidden" id="layer_2"></li>
+										<li><a href="#" onclick="residentialNodes(); return false;" id="residential_l" class="hidden disabled">Residential Nodes</a></li>
+										<li><a href="#" onclick="vpsNodes(); return false;" id="vps_l" class="hidden disabled">Virtual Private Servers</a></li>
+										<li class="divider hidden" id="layer_3"></li>
+										<li><a href="#" onclick="internetNodes(); return false;" id="internet_l" class="hidden disabled">Internet Access</a></li>
+										<li><a href="#" onclick="wirelessNodes(); return false;" id="wireless_l" class="hidden disabled">Wireless Access</a></li>
+										<li><a href="#" onclick="wiredNodes(); return false;" id="wired_l" class="hidden disabled">Wired (eth) Access</a></li>
+									</ul>
+								</li>
+								<li class="dropdown">
+									<a class="dropdown-toggle" data-toggle="dropdown" href="#">
+										Tools
+										<b class="caret"></b>
+									</a>
+									<ul class="dropdown-menu" aria-labelledby="dropdownMenu" role="menu">
+										<li><a href="#" onclick="geoLocate(); return false;">Locate Me</a></li>
+										<li><a href="#" onclick="initDistance();" id="distance" data-toggle="tooltip" data-placement="bottom" data-original-title="Click on the first node, and then the second node." >Calculate Distance</a></li>
+										<li class="divider"></li>
+										<li><a href="#" onclick="search(); return false;" class="disabled">Search</a></li>
+									</ul>
+								</li>
+								<li><button href="#" onclick="initRegistration();" class="btn btn-primary navbar-btn" id="addme" data-toggle="tooltip" data-placement="bottom" data-original-title="Click anywhere to add your node!" >Add Node</button></li>
+							</ul>
+						</div>
+						<div class="visible-sm">
+							<ul class="nav navbar-nav">
+																
+								<li><a href="#" onclick="geoLocate(); return false;">Locate Me</a></li>
+								<li><a href="#" onclick="initDistance();" id="distance" data-toggle="tooltip" data-placement="bottom" data-original-title="Click on the first node, and then the second node." >Calculate Distance</a></li>
+																
+								<li><a href="#" onclick="search(); return false;">Search</a></li>
+								
+								<li><a href="#" onclick="initRegistration();" id="addme">Add Node</a></li>
+							</ul>
+						</div>
+					</div> 
+				</div> 
+			</div>
+			<noscript><div class="alert alert-warning"><h1>Please enable Javascript</h1><p>This website requires javascript to be viewed properly.</p></noscript>
+			<div id="map"></div>
+		</div>
 		<script type="text/javascript" src="/js/loadmap.js"></script>
 	</body>
 </html>
diff --git a/res/web/js/common.js b/res/web/js/common.js
index b4a4bb1..3c18145 100644
--- a/res/web/js/common.js
+++ b/res/web/js/common.js
@@ -15,7 +15,8 @@ function fixNavbarBrand() {
 	// If it's too big, then decrease the font size
 	// on the navbar-brand until we get a nice same
 	// height on all navbars
-	for (;;) {
+	
+	if ($('.container').css('max-width') != 'none') for (;;) {
 		var wrong = $('.navbar-brand').css('height');
 		var correct = $('.navbar-nav').css('height');
 		wrong = parseFloat(wrong.substring(0, wrong.length-2));
@@ -29,13 +30,14 @@ function fixNavbarBrand() {
 
 function hide(x) {
 	$('#bringnavbarback').remove();
-	$('.navbar').animate({top: '-500px'}, 1000);
-	$('#wrap').append('<div id="bringnavbarback">Show</div>');
-	$('#bringnavbarback').animate({top: '0px'}, 500);
-	$('.leaflet-top').animate({top: '0px'}, 500);
-	$('#bringnavbarback').bind('click', function() {
-		$('.navbar').animate({top: '0px'}, 500);
-		$('.leaflet-top').animate({top: '45px'}, 500);
-		$('#bringnavbarback').animate({top: '-500px'}, 1000);
+	$('.navbar').fadeOut(500, function() {
+		$('#wrap').append('<div id="bringnavbarback">Show</div>');
+		$('#bringnavbarback').fadeIn(500, function() {
+			$('#bringnavbarback').bind('click', function() {
+				$('#bringnavbarback').fadeOut(500, function() {
+					$('.navbar').fadeIn(500);
+				});
+			});
+		});
 	});
-}
\ No newline at end of file
+}
diff --git a/res/web/js/form.js b/res/web/js/form.js
index 7961caf..c7d3a6f 100644
--- a/res/web/js/form.js
+++ b/res/web/js/form.js
@@ -2,17 +2,17 @@ function createMessageForm(name, ipv6) {
 	var html = '<div id="messageCreate">';
 		html += '<div id="one">';
 			html += '<h6>Send Message to '+name+'</h6>';
-			html += '<input type="email" placeholder="Your Email" id="from" required>';
-			html += '<input type="text" id="address" value="'+ipv6+'" disabled class="hidden">';
-			html += '<br/><input type="text" placeholder="Subject" id="subject" required>';
-			html += '<br/><textarea placeholder="Body" id="message" required></textarea>';
+			html += '<input type="email" placeholder="Your Email" id="from" class="form-control" required>';
+			html += '<br/><input type="text" id="address" value="'+ipv6+'" class="form-control" disabled class="hidden">';
+			html += '<br/><input type="text" placeholder="Subject" class="form-control" id="subject" required>';
+			html += '<br/><textarea placeholder="Body" id="message" class="form-control" required></textarea>';
 			html += '<br/><br/><div class="row"><div class="col col-lg-6" style="text-align:center;">';
 			html += '<input type="reset" id="cancelmessage" class="btn btn-small" value="Cancel Message"></div>';
 			html += '<div class="col col-lg-6" style="text-align:center;">';
 			html += '<input type="submit" id="nextpagesubmit" class="btn btn-small btn-primary" value="Next Page" onclick="next(2); return false;"></div></div>';
 		html += '</div><div id="two">';
 			html += '<img id="captcha_img">';
-			html += '<br/><input type="text" placeholder="Captcha" id="captcha" required>';
+			html += '<br/><input type="text" placeholder="Captcha" class="form-control" id="captcha" required>';
 			html += '<br/><div class="row"><div class="col col-lg-6" style="text-align:center;">';
 			html += '<input type="reset" id="cancel" class="btn btn-small" value="Cancel Message"></div>';
 			html += '<div class="col col-lg-6" style="text-align:center;">';
@@ -27,13 +27,13 @@ function getForm(lat, lng) {
 	form += '<div class="tabby">';
 		form += '<div class="tab" id="one">';
 			form += '<label><strong>Name</strong> <span class="desc">Marker title</span></label>';
-			form += '<input type="text" class="input-medium" placeholder="Required" id="name" name="name" maxlength="255" />';
+			form += '<input type="text" class="input-medium form-control" placeholder="Required" id="name" name="name" maxlength="255" />';
 			form += '<label><strong>Email</strong> <span class="desc">Never shared</span></label>';
-			form += '<input type="email" class="input-medium" placeholder="Required" id="email" name="email" />';
+			form += '<input type="email" class="input-medium form-control" placeholder="Required" id="email" name="email" />';
 			form += '<label><strong>Address</strong> <span class="desc">Network-specific IP</span></label>';
-			form += '<input type="text" class="input-medium" id="address" name="address" placeholder="Required" maxlength="39"/>';
+			form += '<input type="text" class="input-medium form-control" id="address" name="address" placeholder="Required" maxlength="39"/>';
 			form += '<label><strong>Details</strong></label>';
-			form += '<input type="text" class="input-medium" placeholder="Home, Work, ..." id="details" maxlength="255"/><br/>';
+			form += '<input type="text" class="input-medium form-control" placeholder="Home, Work, ..." id="details" maxlength="255"/><br/>';
 			form += '<div class="row"><div class="col col-lg-6" style="text-align:center;">';
 			form += '<button class="btn btn-small" href="#" onclick="cancelRegistration(); return false;">Cancel</button></div>';
 			form += '<div class="col col-lg-6" style="text-align:center;">';
@@ -76,9 +76,9 @@ function getForm(lat, lng) {
 		form += '</div>';
 		form += '<div class="tab" id="four">';
 			form += '<p><strong>PGP</strong><br/><small>8 digit or 16 digit.</small></p>';
-			form += '<input type="text" class="input-medium" placeholder="CAFEBABE" id="pgp" name="pgp" maxlength="16" />';
+			form += '<input type="text" class="input-medium form-control" placeholder="CAFEBABE" id="pgp" name="pgp" maxlength="16" />';
 			form += '<label><strong>Contact</strong></label>';
-			form += '<textarea class="contact" id="contact" placeholder="XMPP username, Reddit username, ..." maxlength="255"></textarea><br/>';
+			form += '<textarea class="contact form-control" id="contact" placeholder="XMPP username, Reddit username, ..." maxlength="255"></textarea><br/>';
 			form += '<input style="display: none;" type="text" id="latitude" name="latitude" value="'+lat+'"/>';
 			form += '<input style="display: none;" type="text" id="longitude" name="longitude" value="'+lng+'"/>';
 			form += '<div class="row"><div class="col col-lg-6" style="text-align:center;">';
diff --git a/res/web/js/icon.js b/res/web/js/icon.js
index d9be2eb..fb8bca9 100644
--- a/res/web/js/icon.js
+++ b/res/web/js/icon.js
@@ -1,33 +1,24 @@
 var NodeIcon = L.Icon.extend({
     options: {
-        shadowUrl: '/img/marker-shadow.png',
+        shadowUrl: '/img/shadow.png',
+		iconSize: [25, 41],
+		iconAnchor: [15, 35],
+		popupAnchor: [-1, -25]
     }
 });
 
 var activeNodeIcon = new NodeIcon({
-	iconUrl: '/img/marker-icon.png',
-	iconSize: [25, 41],
-	iconAnchor: [15, 35],
-	popupAnchor: [-1, -25]
+	iconUrl: '/img/node.png'
 });
 
 var	inactiveNodeIcon = new NodeIcon({
-	iconUrl: '/img/marker-icon_light_gray.png',
-	iconSize: [25, 41],
-	iconAnchor: [15, 35],
-	popupAnchor: [-1, -25]
+	iconUrl: '/img/inactive.png'
 });
 
 var newUserIcon = new NodeIcon({
-	iconUrl: '/img/marker-icon_gray.png',
-	iconSize: [25, 41],
-	iconAnchor: [15, 35],
-	popupAnchor: [-1, -25]
+	iconUrl: '/img/newUser.png'
 });
 
 var VPSIcon = new NodeIcon({ 
-	iconUrl: '/img/marker-icon_light_gray.png',
-	iconSize: [25, 41],
-	iconAnchor: [15, 35],
-	popupAnchor: [-1, -25]
+	iconUrl: '/img/vps.png'
 });
\ No newline at end of file
diff --git a/res/web/js/layers.js b/res/web/js/layers.js
new file mode 100644
index 0000000..dcd9e1f
--- /dev/null
+++ b/res/web/js/layers.js
@@ -0,0 +1,262 @@
+var nodes = [];
+var statuses = [];
+
+function addNodes() {
+	$.ajax({
+		type: "GET",
+		url: "/api/all?geojson",
+		dataType:"json",
+		success: addLayers
+	});
+}
+
+function addLayers(response) {
+	// When we load the page, we want to add all of 
+	// the layers to just the basic "all" layers
+	L.geoJson(response.data, {
+		pointToLayer: createMarker
+	}).addTo(all).on('click', nodeInfoClick);
+	// Now we also want to create the two arrays that
+	// we have allocated at the top of the file.
+	// `nodes` will contain an array of the [object Object] nodes
+	// while `statuses` will contain an array of the int32
+	// statuses for each corrisponding node.
+	for (i in response.data.features) {
+		nodes[i] = jQuery.extend(true, {}, response.data.features[i]);
+		statuses[i] = nodes[i].properties.Status;
+	}
+}
+
+function filterLayer() {
+	var filter = getFilter();
+	temp.clearLayers();
+	var matches = [];
+	var notFilter = getNotFilter();
+	for (var i = 0; i < nodes.length; i++) {
+		if ((filter&statuses[i]) == filter) {
+			if (typeof notFilter == 'undefined') {
+				matches[matches.length] = nodes[i];
+			} else if ((notFilter|statuses[i]) == notFilter) {
+				matches[matches.length] = nodes[i];
+			}
+		}
+	}
+	
+	L.geoJson(matches, {
+		pointToLayer: createMarker
+	}).addTo(temp).on('click', nodeInfoClick);
+}
+
+function getNotFilter() {
+	var notFilter;
+	if (!($('#potential_l').hasClass('disabled'))) {
+		if (!($('#vps_l').hasClass('disabled'))) {
+			// Both Potential and VPS
+			notFilter = ~01111111;
+			notFilter ^= STATUS_PHYSICAL;
+		} else {
+			// Only potential
+			notFilter = ~0;
+			notFilter ^= STATUS_ACTIVE;
+		}
+	} else if (!($('#vps_l').hasClass('disabled'))) {
+		// Only VPS
+		notFilter = ~01111110;
+		notFilter ^= STATUS_PHYSICAL;
+	} 
+	
+	return notFilter;
+}
+
+function getFilter() {
+	var active = 0, residential = 0, internet = 0, wireless = 0, wired = 0;
+		
+	if (!($("#active_l").hasClass('disabled'))) active = STATUS_ACTIVE;
+	if (!($("#residential_l").hasClass('disabled'))) residential = STATUS_PHYSICAL;
+	if (!($("#internet_l").hasClass('disabled'))) internet = STATUS_INTERNET;
+	if (!($("#wireless_l").hasClass('disabled'))) wireless = STATUS_WIRELESS;
+	if (!($("#wired_l").hasClass('disabled'))) wired = STATUS_WIRED;
+	
+	return (active|residential|internet|wireless|wired);
+}
+
+function onOff() {
+	if ($('#all_l').hasClass('disabled')) {
+		// Stuff on the on/off
+		$('#all_l').removeClass('disabled');
+		$('#all_l').html('On');
+		// Other Stuff
+		$('#layer_1, #active_l, #potential_l').removeClass('hidden');
+	} else {
+		// Stuff on the on/off
+		$('#all_l').addClass('disabled');
+		$('#all_l').html('Off');
+		// Other Stuff
+		$('#layer_1, #active_l, #potential_l').addClass('hidden disabled');
+		$('#layer_2, #residential_l, #vps_l').addClass('hidden disabled');
+		$('#layer_3, #internet_l, #wireless_l, #wired_l').addClass('hidden disabled');
+		// Reset Filter
+		map.removeLayer(temp);
+		map.addLayer(all);
+	}
+}
+
+function activeNodes() {
+	map.removeLayer(all);
+	if ($('#active_l').hasClass('disabled')) {
+		if (!($('#potential_l').hasClass('disabled'))) {
+			// If potential is already set, we want to
+			// change it from potential to active, so
+			// first we change some UI stuff.
+			$('#potential_l').addClass('disabled');
+		}
+		$('#active_l').removeClass('disabled');
+		$('#layer_2, #residential_l, #vps_l').removeClass('hidden');
+		// Tell the filter to look for active nodes
+		// and ignore potential nodes.
+		filterLayer();
+	} else {
+		// Active is already set; do nothing.
+	}
+}
+
+function potentialNodes() {
+	map.removeLayer(all);
+	if ($('#potential_l').hasClass('disabled')) {
+		if (!($('#active_l').hasClass('disabled'))) {
+			// If active is already set, we want to
+			// change it from active to potential, so
+			// first we change some UI stuff.
+			$('#active_l').addClass('disabled');
+		}
+		$('#potential_l').removeClass('disabled');
+		$('#layer_2, #residential_l, #vps_l').removeClass('hidden');
+		// Tell the filter to look for potential nodes
+		// and ignore potential nodes.
+		filterLayer();
+	} else {
+		// Active is already set; do nothing.
+	}
+}
+
+function residentialNodes() {
+	if ($('#residential_l').hasClass('disabled')) {
+		if (!($('#vps_l').hasClass('disabled'))) {
+			// If residential is already set, we want to
+			// change it from residential to vps, so
+			// first we change some UI stuff.
+			$('#vps_l').addClass('disabled');
+		}
+		$('#residential_l').removeClass('disabled');
+		$('#layer_3, #internet_l, #wireless_l, #wired_l').removeClass('hidden');
+		// Tell the filter to look for active nodes
+		// and ignore potential nodes.
+		filterLayer();
+	} else {
+		// Residential is already set; do nothing.
+	}
+}
+
+function vpsNodes() {
+	if ($('#vps_l').hasClass('disabled')) {
+		if (!($('#residential_l').hasClass('disabled'))) {
+			$('#residential_l').addClass('disabled');
+		}
+		$('#vps_l').removeClass('disabled');
+		$('#layer_3, #internet_l, #wireless_l, #wired_l').removeClass('hidden');
+		// Tell the filter to look for active nodes
+		// and ignore potential nodes.
+		filterLayer();
+	} else {
+		// Residential is already set; do nothing.
+	}
+}
+
+function internetNodes() {
+	if ($('#internet_l').hasClass('disabled')) {
+		$('#internet_l').removeClass('disabled');
+	} else {
+		$('#internet_l').addClass('disabled');
+	}
+	filterLayer();
+}
+
+function wirelessNodes() {
+	if ($('#wireless_l').hasClass('disabled')) {
+		$('#wireless_l').removeClass('disabled');
+	} else {
+		$('#wireless_l').addClass('disabled');
+	}
+	filterLayer();
+}
+
+function wiredNodes() {
+	if ($('#wired_l').hasClass('disabled')) {
+		$('#wired_l').removeClass('disabled');
+	} else {
+		$('#wired_l').addClass('disabled');
+	}
+	filterLayer();
+}
+
+function createMarker(feature, latlng) {
+	var html = '<div class="node">';
+	html +=  '<h4>'+feature.properties.OwnerName+'</h4><h4>';
+	if (feature.properties.SourceID) {
+		html += '<a href="'+cachedMaps[feature.properties.SourceID].hostname+'/node/'+feature.id+'" class="btn btn-mini btn-info" id="sendMessage">Message</a>';
+	} else {
+		html += '<button class="btn btn-mini btn-info" id="sendMessage">Message</button>';
+	}
+	html += '&nbsp;<button class="btn btn-mini btn-success" id="edit">Edit</button>';
+	html += '&nbsp;<button class="btn btn-mini btn-warning" id="delete">Delete</button></h4>';
+	html += '<div class="text-center"><a href="/node/'+feature.id+'" class="btn btn-small btn-primary">'+feature.id+'</a></div><hr>';
+	
+if (feature.properties.SourceID) {
+	html += '<div class="property">Source</div>';
+		if (cachedMaps[feature.properties.SourceID] != null) {
+			sourceMap = cachedMaps[feature.properties.SourceID];
+			html += '<div class="more">Retrieved from <a href="'+sourceMap.hostname+'/node/'+feature.id+'">'+(sourceMap.name ? sourceMap.name : 'another map')+'</a>.</div>';
+		} else {
+			html += '<div class="more">Retrieved from another map.</div>';
+		}
+	}
+	
+	if (feature.properties.Details) {
+		html += '<div class="property">Details</div><div class="more">'+feature.properties.Details+'</div>';
+	}
+	if (feature.properties.Contact) {
+		html += '<div class="property">Contact</div><div class="more">'+feature.properties.Contact+'</div>';
+	}
+	if (feature.properties.PGP) {
+		html += '<div class="property">PGP</div><div class="more">'+(feature.properties.PGP).toUpperCase()+'</div>';
+	}
+	
+	html += '</div>';
+	
+	var p = L.popup();
+	p.setLatLng(latlng);
+	p.setContent(html);
+	
+	
+	// Use the status to set an appropriate icon and effects.
+	var icon = inactiveNodeIcon;
+	if (feature.properties.Status & STATUS_ACTIVE > 0) {
+		icon = activeNodeIcon;
+	}
+		
+	// If it's a VPS, show the VPS icon instead of the active/inactive icon
+	if (!(feature.properties.Status & STATUS_PHYSICAL)) {
+		icon = VPSIcon;
+	}
+	
+	// Create the Marker with options set above.
+	var m = L.marker(latlng, {icon: icon}).bindPopup(html);
+	
+	// If we have /node/xxx then center the map on it
+	if (nodexxx(feature.id)) {
+		map.setView(latlng, 8);
+		nodeInfoClick(html, true);
+	}
+		
+	return m;
+}
\ No newline at end of file
diff --git a/res/web/js/loadmap.js.tmpl b/res/web/js/loadmap.js.tmpl
index 7f84bbb..a026616 100644
--- a/res/web/js/loadmap.js.tmpl
+++ b/res/web/js/loadmap.js.tmpl
@@ -11,22 +11,25 @@ var nodes = [];
 var firstLoad = true;
 var attribution = '<a href="https://github.com/ProjectMeshnet/nodeatlas">NodeAtlas {{.Version}}</a> — Map data {{.Map.Attribution}}';
 
-var nodelayer = new L.MarkerClusterGroup({
+var all = new L.MarkerClusterGroup({
 	spiderfyOnMaxZoom: true,
 	showCoverageOnHover: false,
 	zoomToBoundsOnClick: true,
 	maxClusterRadius: {{.Map.ClusterRadius}}
 });
 
+var temp = jQuery.extend(true, {}, all);
+
 var newUser = new L.LayerGroup();
 var tilelayer = L.tileLayer(options.tileserver, {styleId: 22677, attribution: attribution});
 
 var map = new L.Map('map', {
 	center: options.center,
 	zoom: options.zoom,
+	zoomControl: false,
 	maxZoom: 16,
 	minZoom: 2,
-	layers: [tilelayer, nodelayer, newUser]
+	layers: [tilelayer, all, temp, newUser]
 });
 
 $(document).ready(function() {
@@ -79,85 +82,6 @@ function loadChildMaps() {
 	});
 }
 
-function addNodes() {
-	$.getJSON("/api/all?geojson", function (response) {
-		// TODO: Check for errors here (response.error)
-		L.geoJson(response.data, {
-			pointToLayer: createMarker
-		}).addTo(nodelayer).on('click', nodeInfoClick);
-
-		for (var i in response.data.features) {
-			nodes[i] = {
-				id: response.data.features[i].id,
-				properties: response.data.features[i].properties
-			};
-
-		}
-	});
-}
-
-function createMarker(feature, latlng) {
-	var html = '<div class="node">';
-	html +=  '<h4>'+feature.properties.OwnerName+'&nbsp;';
-	if (feature.properties.SourceID) {
-		html += '<a href="'+cachedMaps[feature.properties.SourceID].hostname+'/node/'+feature.id+'" class="btn btn-mini btn-info" id="sendMessage">Message</a>';
-	} else {
-		html += '<button class="btn btn-mini btn-info" id="sendMessage">Message</button>';
-	}
-	html += '&nbsp;<button class="btn btn-mini btn-success" id="edit">Edit</button>';
-	html += '&nbsp;<button class="btn btn-mini btn-warning" id="delete">Delete</button></h4>';
-	html += '<div class="text-center"><a href="/node/'+feature.id+'" class="btn btn-small btn-primary">'+feature.id+'</a></div><hr>';
-	
-if (feature.properties.SourceID) {
-	html += '<div class="property">Source</div>';
-		if (cachedMaps[feature.properties.SourceID] != null) {
-			sourceMap = cachedMaps[feature.properties.SourceID];
-			html += '<div class="more">Retrieved from <a href="'+sourceMap.hostname+'/node/'+feature.id+'">'+(sourceMap.name ? sourceMap.name : 'another map')+'</a>.</div>';
-		} else {
-			html += '<div class="more">Retrieved from another map.</div>';
-		}
-	}
-
-	if (feature.properties.Details) {
-		html += '<div class="property">Details</div><div class="more">'+feature.properties.Details+'</div>';
-	}
-	if (feature.properties.Contact) {
-		html += '<div class="property">Contact</div><div class="more">'+feature.properties.Contact+'</div>';
-	}
-	if (feature.properties.PGP) {
-		html += '<div class="property">PGP</div><div class="more">'+(feature.properties.PGP).toUpperCase()+'</div>';
-	}
-	
-	html += '</div>';
-	
-	var p = L.popup();
-	p.setLatLng(latlng);
-	p.setContent(html);
-	
-	
-	// Use the status to set an appropriate icon and effects.
-	var icon = inactiveNodeIcon;
-	if (feature.properties.Status & STATUS_ACTIVE > 0) {
-		icon = activeNodeIcon;
-	}
-		
-	// If it's a VPS, show the VPS icon instead of the active/inactive icon
-	if (!(feature.properties.Status & STATUS_PHYSICAL)) {
-		icon = VPSIcon;
-	}
-	
-	// Create the Marker with options set above.
-	var m = L.marker(latlng, {icon: icon}).bindPopup(html);
-	
-	// If we have /node/xxx then center the map on it
-	if (nodexxx(feature.id)) {
-		map.setView(latlng, 8);
-		nodeInfoClick(html, true);
-	}
-		
-	return m;
-}
-
 function nodexxx(node) {
 	var path = window.location.pathname.split('/');
 	if (path[1] != "node") return false;
@@ -195,5 +119,6 @@ function addJSFiles() {
 	html += '<script type="text/javascript" src="/js/node.js"></script>';
 	html += '<script type="text/javascript" src="/js/verify.js"></script>';
 	html += '<script type="text/javascript" src="/js/form.js"></script>';
+	html += '<script type="text/javascript" src="/js/layers.js"></script>';
 	$('head').append(html);
 }
diff --git a/res/web/js/node.js b/res/web/js/node.js
index 254a0be..e1ced8b 100644
--- a/res/web/js/node.js
+++ b/res/web/js/node.js
@@ -300,25 +300,11 @@ function nodeInfoClick(e, on) {
 function getSTATUS() {
 	var active = 0, residential = 0, internet = 0, wireless = 0, wired = 0;
 	
-	if ($("#active").is(':checked')) {
-		active = STATUS_ACTIVE;
-	}	
-	
-	if ($("#residential").is(':checked')) {
-		residential = STATUS_PHYSICAL;
-	}
-	
-	if ($("#internet").is(':checked')) {
-		internet = STATUS_INTERNET;
-	}
-	
-	if ($("#wireless").is(':checked')) {
-		wireless = STATUS_INTERNET;
-	}
-	
-	if ($("#wired").is(':checked')) {
-		wired = STATUS_WIRED;
-	}
+	if ($("#active").is(':checked')) active = STATUS_ACTIVE;	
+	if ($("#residential").is(':checked')) residential = STATUS_PHYSICAL;
+	if ($("#internet").is(':checked')) internet = STATUS_INTERNET;
+	if ($("#wireless").is(':checked')) wireless = STATUS_WIRELESS;
+	if ($("#wired").is(':checked')) wired = STATUS_WIRED;
 	
 	return (active|residential|internet|wireless|wired);
 }
\ No newline at end of file