diff --git a/public/less/admin/mobile.less b/public/less/admin/mobile.less
index 21dd043b29..ed870595bb 100644
--- a/public/less/admin/mobile.less
+++ b/public/less/admin/mobile.less
@@ -8,30 +8,8 @@
 
 @media (max-width: 980px) {
 	body {
-		padding-top: 90px;
-	}
-
-	#mobile-menu {
-		width: 31px;
-		background: none;
-		border: none;
-		vertical-align: 10%;
-		margin-right: 10px;
-		margin-left: -15px;
-		outline: none !important;
-		display: block;
-
-		position: absolute;
-		top: 22px;
-		left: 22px;
-
-		.bar {
-			width: 100%;
-			height: 2px;
-			background: #fff;
-			margin-bottom: 3px;
-			border-radius: 10px;
-		}
+		//padding-top: 90px;
+		height: 100%;
 	}
 
 	.header {
@@ -59,7 +37,84 @@
 		}
 	}
 
-	
+	#mobile-menu {
+		width: 31px;
+		background: none;
+		border: none;
+		vertical-align: 10%;
+		margin-right: 10px;
+		margin-left: -15px;
+		outline: none !important;
+		display: block;
+
+		position: absolute;
+		top: 22px;
+		left: 22px;
+
+		.bar {
+			width: 100%;
+			height: 2px;
+			background: #fff;
+			margin-bottom: 3px;
+			border-radius: 10px;
+		}
+	}
+
+	#menu {
+		background-color: #1D1F20;
+		background-image: linear-gradient(145deg, #1D1F20, #404348);
+
+		a {
+			color: #fff;
+			text-decoration: none;
+		}
+
+		a:hover {
+			text-decoration: underline;
+		}
+	}
+
+	.menu-header-title {
+		font-weight: 400;
+		letter-spacing: 0.5px;
+		margin: 0;
+	}
+
+	.menu-section {
+		margin: 25px 0;
+	}
+
+	.menu-section-title {
+		text-transform: uppercase;
+		color: #85888d;
+		font-weight: 200;
+		font-size: 13px;
+		letter-spacing: 1px;
+		padding: 0 20px;
+		margin:0;
+	}
+
+	.menu-section-list {
+		padding:0;
+		margin: 10px 0;
+		list-style:none;
+
+		a {
+			display: block;
+			padding: 10px 20px;
+		}
+
+		a:hover {
+			background-color: rgba(255, 255, 255, 0.1);
+			text-decoration: none;
+		}
+	}
+
+	#panel {
+		background: white;
+		min-height: 100%;
+	}
+
 	.slideout-menu {
 		position: fixed;
 		left: 0;
diff --git a/public/src/admin/admin.js b/public/src/admin/admin.js
index dd53664a87..2164de5bc6 100644
--- a/public/src/admin/admin.js
+++ b/public/src/admin/admin.js
@@ -22,6 +22,8 @@
 
 		$('[component="logout"]').on('click', app.logout);
 		app.alert = launchSnackbar;
+
+		configureSlidemenu();
 	});
 
 	socket.emit('admin.config.get', function(err, config) {
@@ -113,4 +115,43 @@
 			bar.on('click', clickfn);
 		}
 	}
+
+	function configureSlidemenu() {
+		var slideout = new Slideout({
+			'panel': document.getElementById('panel'),
+			'menu': document.getElementById('menu'),
+			'padding': 256,
+			'tolerance': 70
+		});
+
+		$('#mobile-menu').on('click', function() {
+			slideout.toggle();
+		});
+
+		$('#menu a').on('click', function() {
+			slideout.close();
+		});
+
+		$(window).on('resize', function() {
+			slideout.close();
+		});
+
+		function onOpeningMenu() {
+			$('#header').css({
+				'top': $('#panel').position().top * -1 + 'px',
+				'position': 'absolute'
+			});
+		}
+
+		slideout.on('beforeopen', onOpeningMenu);
+		slideout.on('open', onOpeningMenu);
+		slideout.on('translate', onOpeningMenu);
+
+		slideout.on('close', function() {
+			$('#header').css({
+				'top': '0px',
+				'position': 'fixed'
+			});
+		});
+	}
 }());
\ No newline at end of file
diff --git a/src/views/admin/footer.tpl b/src/views/admin/footer.tpl
index e81d9e6a1a..02f80c73f0 100644
--- a/src/views/admin/footer.tpl
+++ b/src/views/admin/footer.tpl
@@ -1,4 +1,4 @@
-
+			</div>
 		</div>
 	</div>
 
diff --git a/src/views/admin/partials/menu.tpl b/src/views/admin/partials/menu.tpl
index 2e8bb3df00..a6e68d9ba1 100644
--- a/src/views/admin/partials/menu.tpl
+++ b/src/views/admin/partials/menu.tpl
@@ -1,147 +1,167 @@
-<nav class="header">
-	<div class="pull-left">
-		<button id="mobile-menu">
-			<div class="bar"></div>
-			<div class="bar"></div>
-			<div class="bar"></div>
-		</button>
-		<h1 id="main-page-title"></h1>
-	</div>	
-	
-	<ul id="user_label" class="pull-right">
-		<li class="dropdown pull-right">
-			<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="user_dropdown">
-				<i class="fa fa-ellipsis-v"></i>
-			</a>
-			<ul id="user-control-list" class="dropdown-menu" aria-labelledby="user_dropdown">
-				<li>
-					<a href="{relative_path}/" target="_blank" title="View Forum">
-						View Forum
-					</a>
-				</li>
-				<li role="presentation" class="divider"></li>
-				<li>
-					<a href="#" class="reload" title="Reload Forum">
-						Reload Forum
-					</a>
-				</li>
-				<li>
-					<a href="#" class="restart" title="Restart Forum">
-						Restart Forum
-					</a>
-				</li>
-				<li role="presentation" class="divider"></li>
-				<li component="logout">
-					<a href="#">Log out</a>
-				</li>
-			</ul>
-		</li>
-		<form class="pull-right hidden-sm hidden-xs" role="search">
-			<div class="" id="acp-search" >
-				<div class="dropdown">
-					<input type="text" data-toggle="dropdown" class="form-control" placeholder="Search...">
-					<ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
+<nav id="menu" class="visible-xs visible-sm">
+	<section class="menu-section">
+		<h3 class="menu-section-title">General</h3>
+		<ul class="menu-section-list">
+			<li><a href="{relative_path}/admin/general/homepage">Home Page</a></li>
+			<li><a href="{relative_path}/admin/general/navigation">Navigation</a></li>
+			<li><a href="{relative_path}/admin/general/languages">Languages</a></li>
+			<li><a href="{relative_path}/admin/general/sounds">Sounds</a></li>
+		</ul>
+	</section>
+
+	<section class="menu-section">
+		<h3 class="menu-section-title">Product</h3>
+		<ul class="menu-section-list">
+			
+		</ul>
+	</section>
+</nav>
+
+<main id="panel">
+	<nav class="header">
+		<div class="pull-left">
+			<button id="mobile-menu">
+				<div class="bar"></div>
+				<div class="bar"></div>
+				<div class="bar"></div>
+			</button>
+			<h1 id="main-page-title"></h1>
+		</div>	
+		
+		<ul id="user_label" class="pull-right">
+			<li class="dropdown pull-right">
+				<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="user_dropdown">
+					<i class="fa fa-ellipsis-v"></i>
+				</a>
+				<ul id="user-control-list" class="dropdown-menu" aria-labelledby="user_dropdown">
+					<li>
+						<a href="{relative_path}/" target="_blank" title="View Forum">
+							View Forum
+						</a>
+					</li>
+					<li role="presentation" class="divider"></li>
+					<li>
+						<a href="#" class="reload" title="Reload Forum">
+							Reload Forum
+						</a>
+					</li>
+					<li>
+						<a href="#" class="restart" title="Restart Forum">
+							Restart Forum
+						</a>
+					</li>
+					<li role="presentation" class="divider"></li>
+					<li component="logout">
+						<a href="#">Log out</a>
+					</li>
+				</ul>
+			</li>
+			<form class="pull-right hidden-sm hidden-xs" role="search">
+				<div class="" id="acp-search" >
+					<div class="dropdown">
+						<input type="text" data-toggle="dropdown" class="form-control" placeholder="Search...">
+						<ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
+					</div>
 				</div>
-			</div>
-		</form>
-	</ul>
-	<ul id="main-menu">
-		<li class="menu-item">
-			<a href="{relative_path}/admin/general/dashboard">Dashboard</a>
-		</li>
-		<li class="dropdown menu-item">
-			<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">General</a>
-			<ul class="dropdown-menu" role="menu">
-				<li><a href="{relative_path}/admin/general/homepage">Home Page</a></li>
-				<li><a href="{relative_path}/admin/general/navigation">Navigation</a></li>
-				<li><a href="{relative_path}/admin/general/languages">Languages</a></li>
-				<li><a href="{relative_path}/admin/general/sounds">Sounds</a></li>
-			</ul>
-		</li>
-		<li class="dropdown menu-item">
-			<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Manage</a>
-			<ul class="dropdown-menu" role="menu">
-				<li><a href="{relative_path}/admin/manage/categories">Categories</a></li>
-				<li><a href="{relative_path}/admin/manage/tags">Tags</a></li>
-				<li><a href="{relative_path}/admin/manage/users">Users</a></li>
-				<li><a href="{relative_path}/admin/manage/registration">Registration Queue</a></li>
-				<li><a href="{relative_path}/admin/manage/groups">Groups</a></li>
-				<li><a href="{relative_path}/admin/manage/flags">Flags</a></li>
-			</ul>
-		</li>
-		<li class="dropdown menu-item">
-			<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Settings</a>
-			<ul class="dropdown-menu" role="menu">
-				<li><a href="{relative_path}/admin/settings/general">General</a></li>
-				<li><a href="{relative_path}/admin/settings/reputation">Reputation</a></li>
-				<li><a href="{relative_path}/admin/settings/email">Email</a></li>
-				<li><a href="{relative_path}/admin/settings/user">User</a></li>
-				<li><a href="{relative_path}/admin/settings/group">Group</a></li>
-				<li><a href="{relative_path}/admin/settings/guest">Guests</a></li>
-				<li><a href="{relative_path}/admin/settings/post">Post</a></li>
-				<li><a href="{relative_path}/admin/settings/pagination">Pagination</a></li>
-				<li><a href="{relative_path}/admin/settings/tags">Tags</a></li>
-				<li><a href="{relative_path}/admin/settings/notifications">Notifications</a></li>
-				<li><a href="{relative_path}/admin/settings/web-crawler">Web Crawler</a></li>
-				<li><a href="{relative_path}/admin/settings/sockets">Sockets</a></li>
-				<li><a href="{relative_path}/admin/settings/advanced">Advanced</a></li>
-			</ul>
-		</li>
-		<li class="dropdown menu-item">
-			<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Appearance</a>
-			<ul class="dropdown-menu" role="menu">
-				<li><a href="{relative_path}/admin/appearance/themes">Themes</a></li>
-				<li><a href="{relative_path}/admin/appearance/skins">Skins</a></li>
-				<li><a href="{relative_path}/admin/appearance/customise">Custom HTML &amp; CSS</a></li>
-			</ul>
-		</li>
-		<li class="dropdown menu-item">
-			<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Extend</a>
-			<ul class="dropdown-menu" role="menu">
-				<li><a href="{relative_path}/admin/extend/plugins">Plugins</a></li>
-				<li><a href="{relative_path}/admin/extend/widgets">Widgets</a></li>
-				<li><a href="{relative_path}/admin/extend/rewards">Rewards</a></li>
-			</ul>
-		</li>
-		<!-- IF authentication.length -->
-		<li class="dropdown menu-item">
-			<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Social Authentication</a>
-			<ul class="dropdown-menu" role="menu">
-				<!-- BEGIN authentication -->
-				<li>
-					<a href="{relative_path}/admin{authentication.route}">{authentication.name}</a>
-				</li>
-				<!-- END authentication -->
-			</ul>
-		</li>
-		<!-- ENDIF authentication.length -->
-		<!-- IF plugins.length -->
-		<li class="dropdown menu-item">
-			<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Plugins</a>
-			<ul class="dropdown-menu" role="menu">
-				<!-- BEGIN plugins -->
-				<li>
-					<a href="{relative_path}/admin{plugins.route}">{plugins.name}</a>
-				</li>
-				<!-- END plugins -->
-				<li class="divider"></li>
-				<li data-link="1">
-					<a href="{relative_path}/admin/extend/plugins">Install Plugins</a>
-				</li>
-			</ul>
-		</li>
-		<!-- ENDIF plugins.length -->
-		<li class="dropdown menu-item">
-			<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Advanced</a>
-			<ul class="dropdown-menu" role="menu">
-				<li><a href="{relative_path}/admin/advanced/database">Database</a></li>
-				<li><a href="{relative_path}/admin/advanced/events">Events</a></li>
-				<li><a href="{relative_path}/admin/advanced/logs">Logs</a></li>
-				<li><a href="{relative_path}/admin/advanced/post-cache">Post Cache</a></li>
-				<!-- IF env -->
-				<li><a href="{relative_path}/admin/development/logger">Logger</a></li>
-				<!-- ENDIF env -->
-			</ul>
-		</li>
-	</ul>
-</nav>
\ No newline at end of file
+			</form>
+		</ul>
+		<ul id="main-menu">
+			<li class="menu-item">
+				<a href="{relative_path}/admin/general/dashboard">Dashboard</a>
+			</li>
+			<li class="dropdown menu-item">
+				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">General</a>
+				<ul class="dropdown-menu" role="menu">
+					<li><a href="{relative_path}/admin/general/homepage">Home Page</a></li>
+					<li><a href="{relative_path}/admin/general/navigation">Navigation</a></li>
+					<li><a href="{relative_path}/admin/general/languages">Languages</a></li>
+					<li><a href="{relative_path}/admin/general/sounds">Sounds</a></li>
+				</ul>
+			</li>
+			<li class="dropdown menu-item">
+				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Manage</a>
+				<ul class="dropdown-menu" role="menu">
+					<li><a href="{relative_path}/admin/manage/categories">Categories</a></li>
+					<li><a href="{relative_path}/admin/manage/tags">Tags</a></li>
+					<li><a href="{relative_path}/admin/manage/users">Users</a></li>
+					<li><a href="{relative_path}/admin/manage/registration">Registration Queue</a></li>
+					<li><a href="{relative_path}/admin/manage/groups">Groups</a></li>
+					<li><a href="{relative_path}/admin/manage/flags">Flags</a></li>
+				</ul>
+			</li>
+			<li class="dropdown menu-item">
+				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Settings</a>
+				<ul class="dropdown-menu" role="menu">
+					<li><a href="{relative_path}/admin/settings/general">General</a></li>
+					<li><a href="{relative_path}/admin/settings/reputation">Reputation</a></li>
+					<li><a href="{relative_path}/admin/settings/email">Email</a></li>
+					<li><a href="{relative_path}/admin/settings/user">User</a></li>
+					<li><a href="{relative_path}/admin/settings/group">Group</a></li>
+					<li><a href="{relative_path}/admin/settings/guest">Guests</a></li>
+					<li><a href="{relative_path}/admin/settings/post">Post</a></li>
+					<li><a href="{relative_path}/admin/settings/pagination">Pagination</a></li>
+					<li><a href="{relative_path}/admin/settings/tags">Tags</a></li>
+					<li><a href="{relative_path}/admin/settings/notifications">Notifications</a></li>
+					<li><a href="{relative_path}/admin/settings/web-crawler">Web Crawler</a></li>
+					<li><a href="{relative_path}/admin/settings/sockets">Sockets</a></li>
+					<li><a href="{relative_path}/admin/settings/advanced">Advanced</a></li>
+				</ul>
+			</li>
+			<li class="dropdown menu-item">
+				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Appearance</a>
+				<ul class="dropdown-menu" role="menu">
+					<li><a href="{relative_path}/admin/appearance/themes">Themes</a></li>
+					<li><a href="{relative_path}/admin/appearance/skins">Skins</a></li>
+					<li><a href="{relative_path}/admin/appearance/customise">Custom HTML &amp; CSS</a></li>
+				</ul>
+			</li>
+			<li class="dropdown menu-item">
+				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Extend</a>
+				<ul class="dropdown-menu" role="menu">
+					<li><a href="{relative_path}/admin/extend/plugins">Plugins</a></li>
+					<li><a href="{relative_path}/admin/extend/widgets">Widgets</a></li>
+					<li><a href="{relative_path}/admin/extend/rewards">Rewards</a></li>
+				</ul>
+			</li>
+			<!-- IF authentication.length -->
+			<li class="dropdown menu-item">
+				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Social Authentication</a>
+				<ul class="dropdown-menu" role="menu">
+					<!-- BEGIN authentication -->
+					<li>
+						<a href="{relative_path}/admin{authentication.route}">{authentication.name}</a>
+					</li>
+					<!-- END authentication -->
+				</ul>
+			</li>
+			<!-- ENDIF authentication.length -->
+			<!-- IF plugins.length -->
+			<li class="dropdown menu-item">
+				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Plugins</a>
+				<ul class="dropdown-menu" role="menu">
+					<!-- BEGIN plugins -->
+					<li>
+						<a href="{relative_path}/admin{plugins.route}">{plugins.name}</a>
+					</li>
+					<!-- END plugins -->
+					<li class="divider"></li>
+					<li data-link="1">
+						<a href="{relative_path}/admin/extend/plugins">Install Plugins</a>
+					</li>
+				</ul>
+			</li>
+			<!-- ENDIF plugins.length -->
+			<li class="dropdown menu-item">
+				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Advanced</a>
+				<ul class="dropdown-menu" role="menu">
+					<li><a href="{relative_path}/admin/advanced/database">Database</a></li>
+					<li><a href="{relative_path}/admin/advanced/events">Events</a></li>
+					<li><a href="{relative_path}/admin/advanced/logs">Logs</a></li>
+					<li><a href="{relative_path}/admin/advanced/post-cache">Post Cache</a></li>
+					<!-- IF env -->
+					<li><a href="{relative_path}/admin/development/logger">Logger</a></li>
+					<!-- ENDIF env -->
+				</ul>
+			</li>
+		</ul>
+	</nav>
\ No newline at end of file