diff --git a/public/less/admin/general/navigation.less b/public/less/admin/general/navigation.less
index 235631e8bd..65828a2be3 100644
--- a/public/less/admin/general/navigation.less
+++ b/public/less/admin/general/navigation.less
@@ -15,6 +15,13 @@
 		.drag-item {
 			cursor: move;
 			margin-right: 10px;
+			padding: 8px 10px;
+			margin-bottom: 5px;
+		}
+
+		p {
+			line-height: 20px;
+			min-height: 40px;
 		}
 	}
 
diff --git a/src/views/admin/general/navigation.tpl b/src/views/admin/general/navigation.tpl
index ba7f5942e5..826960e569 100644
--- a/src/views/admin/general/navigation.tpl
+++ b/src/views/admin/general/navigation.tpl
@@ -1,107 +1,99 @@
 <div id="navigation">
 	<div class="col-lg-9">
-		<div class="panel panel-default">
-			<div class="panel-heading">Active Navigation</div>
-			<div class="panel-body">
-
-				<div class="clearfix">
-					<ul id="active-navigation" class="nav navbar-nav">
-						<!-- BEGIN navigation -->
-						<li data-index="{navigation.index}" class="{navigation.class} <!-- IF navigation.selected --> active <!-- ENDIF navigation.selected -->">
-							<a href="#" title="{navigation.route}" id="{navigation.id}">
-								<!-- IF navigation.iconClass -->
-								<i class="fa fa-fw {navigation.iconClass}"></i>
-								<!-- ENDIF navigation.iconClass -->
-
-								<!-- IF navigation.text -->
-								<span class="{navigation.textClass}">{navigation.text}</span>
-								<!-- ENDIF navigation.text -->
-							</a>
-						</li>
-						<!-- END navigation -->
-					</ul>
-				</div>
-
-				<hr/>
-
-				<ul id="enabled">
-					<!-- BEGIN enabled -->
-					<li data-index="{enabled.index}" class="well <!-- IF !enabled.selected -->hidden<!-- ENDIF !enabled.selected -->">
-						<form>
-							<div class="row">
-								<div class="col-sm-6">
-
-									<div class="form-group">
-										<label>Icon:</label>
-										<br/>
-										<span class="iconPicker"><i class="fa fa-2x {enabled.iconClass}"></i>
-											<input class="form-control" type="hidden" name="iconClass" value="{enabled.iconClass}" />
-										</span>
-									</div>
-
-									<div class="form-group">
-										<label>Route:</label>
-										<input class="form-control" type="text" name="route" value="{enabled.route}" />
-									</div>
-
-									<div class="form-group">
-										<label>Tooltip:</label>
-										<input class="form-control" type="text" name="title" value="{enabled.title}" />
-									</div>
-								</div>
-
-								<div class="col-sm-6">
-									<div class="form-group">
-										<label>Text:</label>
-										<input class="form-control" type="text" name="text" value="{enabled.text}" />
-									</div>
-
-									<div class="form-group">
-										<label>Text Class: <small>optional</small></label>
-										<input class="form-control" type="text" name="textClass" value="{enabled.textClass}" />
-									</div>
+		<div class="clearfix">
+			<ul id="active-navigation" class="nav navbar-nav">
+				<!-- BEGIN navigation -->
+				<li data-index="{navigation.index}" class="{navigation.class} <!-- IF navigation.selected --> active <!-- ENDIF navigation.selected -->">
+					<a href="#" title="{navigation.route}" id="{navigation.id}">
+						<!-- IF navigation.iconClass -->
+						<i class="fa fa-fw {navigation.iconClass}"></i>
+						<!-- ENDIF navigation.iconClass -->
+
+						<!-- IF navigation.text -->
+						<span class="{navigation.textClass}">{navigation.text}</span>
+						<!-- ENDIF navigation.text -->
+					</a>
+				</li>
+				<!-- END navigation -->
+			</ul>
+		</div>
 
-									<div class="form-group">
-										<label>ID: <small>optional</small></label>
-										<input class="form-control" type="text" name="id" value="{enabled.id}" />
-									</div>
-								</div>
+		<hr/>
+
+		<ul id="enabled">
+			<!-- BEGIN enabled -->
+			<li data-index="{enabled.index}" class="well <!-- IF !enabled.selected -->hidden<!-- ENDIF !enabled.selected -->">
+				<form>
+					<div class="row">
+						<div class="col-sm-6">
+
+							<div class="form-group">
+								<label>Icon:</label>
+								<br/>
+								<span class="iconPicker"><i class="fa fa-2x {enabled.iconClass}"></i>
+									<input class="form-control" type="hidden" name="iconClass" value="{enabled.iconClass}" />
+								</span>
 							</div>
 
-							<hr />
-
-							<strong>Properties:</strong>
-							<div class="checkbox">
-								<label>
-									<input type="checkbox" name="property:adminOnly" <!-- IF enabled.properties.adminOnly -->checked<!-- ENDIF enabled.properties.adminOnly -->/> <strong>Only display to Admins</strong>
-								</label>
+							<div class="form-group">
+								<label>Route:</label>
+								<input class="form-control" type="text" name="route" value="{enabled.route}" />
 							</div>
-							<div class="checkbox">
-								<label>
-									<input type="checkbox" name="property:loggedIn" <!-- IF enabled.properties.loggedIn -->checked<!-- ENDIF enabled.properties.loggedIn -->/> <strong>Only display to logged in users</strong>
-								</label>
+
+							<div class="form-group">
+								<label>Tooltip:</label>
+								<input class="form-control" type="text" name="title" value="{enabled.title}" />
 							</div>
-							<div class="checkbox">
-								<label>
-									<input type="checkbox" name="property:targetBlank" <!-- IF enabled.properties.targetBlank -->checked<!-- ENDIF enabled.properties.targetBlank -->/> <strong>Open in a new window</strong>
-								</label>
+						</div>
+
+						<div class="col-sm-6">
+							<div class="form-group">
+								<label>Text:</label>
+								<input class="form-control" type="text" name="text" value="{enabled.text}" />
 							</div>
 
+							<div class="form-group">
+								<label>Text Class: <small>optional</small></label>
+								<input class="form-control" type="text" name="textClass" value="{enabled.textClass}" />
+							</div>
 
-							<hr />
-							<button class="btn btn-danger delete">Delete</button>
-							<!-- IF enabled.enabled -->
-							<button class="btn btn-warning toggle">Disable</button>
-							<!-- ELSE -->
-							<button class="btn btn-success toggle">Enable</button>
-							<!-- ENDIF enabled.enabled -->
-							<input type="hidden" name="enabled" value="{enabled.enabled}" />
-						</form>
-					</li>
-					<!-- END enabled -->
-				</ul>
-			</div>
-		</div>
+							<div class="form-group">
+								<label>ID: <small>optional</small></label>
+								<input class="form-control" type="text" name="id" value="{enabled.id}" />
+							</div>
+						</div>
+					</div>
+
+					<strong>Properties:</strong>
+					<div class="checkbox">
+						<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+							<input class="mdl-switch__input" type="checkbox" name="property:adminOnly" <!-- IF enabled.properties.adminOnly -->checked<!-- ENDIF enabled.properties.adminOnly -->/>
+							<span class="mdl-switch__label"><strong>Only display to Admins</strong></span>
+						</label>
+					</div>
+					<div class="checkbox">
+						<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+							<input class="mdl-switch__input" type="checkbox" name="property:loggedIn" <!-- IF enabled.properties.loggedIn -->checked<!-- ENDIF enabled.properties.loggedIn -->/> <span class="mdl-switch__label"><strong>Only display to logged in users</strong></span>
+						</label>
+					</div>
+					<div class="checkbox">
+						<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+							<input class="mdl-switch__input" type="checkbox" name="property:targetBlank" <!-- IF enabled.properties.targetBlank -->checked<!-- ENDIF enabled.properties.targetBlank -->/>
+							<span class="mdl-switch__label"><strong>Open in a new window</strong></span>
+						</label>
+					</div>
+
+					<button class="btn btn-danger delete">Delete</button>
+					<!-- IF enabled.enabled -->
+					<button class="btn btn-warning toggle">Disable</button>
+					<!-- ELSE -->
+					<button class="btn btn-success toggle">Enable</button>
+					<!-- ENDIF enabled.enabled -->
+					<input type="hidden" name="enabled" value="{enabled.enabled}" />
+				</form>
+			</li>
+			<!-- END enabled -->
+		</ul>
 	</div>
 
 	<div class="col-lg-3">
@@ -110,14 +102,16 @@
 			<div class="panel-body">
 				<ul id="available">
 					<li data-id="custom" class="clearfix">
-						<div data-id="custom" class="drag-item alert alert-warning pull-left">
-							<i class="fa fa-fw fa-navicon"></i>
+						<div data-id="custom" class="drag-item alert alert-success pull-left">
+							<i class="fa fa-fw fa-plus-circle"></i>
 						</div>
-						<strong>Custom Route</strong>
+						<p>
+							<strong>Custom Route</strong>
+						</p>
 					</li>
 					<!-- BEGIN available -->
 					<li data-id="@index" class="clearfix">
-						<div data-id="@index" class="drag-item alert <!-- IF available.core -->alert-info<!-- ELSE -->alert-success<!-- ENDIF available.core --> pull-left">
+						<div data-id="@index" class="drag-item alert <!-- IF available.core -->alert-warning<!-- ELSE -->alert-info<!-- ENDIF available.core --> pull-left">
 							<i class="fa fa-fw <!-- IF available.iconClass -->{available.iconClass}<!-- ELSE -->fa-navicon<!-- ENDIF available.iconClass -->"></i>
 						</div>
 						<p>