diff --git a/app/views/emails/auth/reminder.blade.php b/app/views/emails/auth/reminder.blade.php
deleted file mode 100644
index 2976327b..00000000
--- a/app/views/emails/auth/reminder.blade.php
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-	<head>
-		<meta charset="utf-8">
-	</head>
-	<body>
-		<h2>Password Reset</h2>
-
-		<div>
-			To reset your password, complete this form: {{ URL::to('password/reset', array($token)) }}.
-		</div>
-	</body>
-</html>
\ No newline at end of file
diff --git a/app/views/shared/_app_layout.blade.php b/app/views/shared/_app_layout.blade.php
index 2518ac28..bf13595b 100644
--- a/app/views/shared/_app_layout.blade.php
+++ b/app/views/shared/_app_layout.blade.php
@@ -2,75 +2,50 @@
 
 @section('content')
 	<header>
-		<div>
-			<h1><a href="/">Pony.fm</a></h1>
-			<div class="now-playing">
-				<pfm-player></pfm-player>
-			</div>
+		<a href="/">Pony.fm</a>
+		<div class="now-playing">
+			<pfm-player></pfm-player>
 		</div>
 	</header>
 
 	<div class="site-body">
-		<section class="sidebar" ng-controller="sidebar">
-			<nav>
-				<ul>
-					@if (Auth::check())
-						<li ng-class="{selected: $state.includes('home')}"><a href="/">Dashboard</a></li>
-					@else
-						<li ng-class="{selected: $state.includes('home')}"><a href="/">Home</a></li>
-					@endif
-					<li><h3>Discover</h3></li>
-					<li ng-class="{selected: $state.includes('tracks') || $state.includes('track')}"><a href="/tracks">Music <i class="icon-music"></i></a></li>
-					<li ng-class="{selected: $state.includes('albums') || $state.includes('album')}"><a href="/albums">Albums <i class="icon-th-list"></i></a></li>
-					<li ng-class="{selected: $state.includes('artists') || $state.includes('artist')}"><a href="/artists">Artists <i class="icon-user"></i></a></li>
+		<ul class="sidebar" ng-controller="sidebar">
+			@if (Auth::check())
+				<li ng-class="{selected: $state.includes('home')}"><a href="/">Dashboard <i class="icon-home"></i></a></li>
+			@else
+				<li ng-class="{selected: $state.includes('home')}"><a href="/">Home <i class="icon-home"></i></a></li>
+			@endif
+			<li ng-class="{selected: $state.includes('tracks') || $state.includes('track') || $state.includes('albums') || $state.includes('album') || $state.includes('artists') || $state.includes('artist')}">
+				<a href="/tracks">Discover <i class="icon-music"></i></a>
+			</li>
 
-					@if (Auth::check())
-						<li>
-							<h3>
-								<a href="#" ng-click="createPlaylist()" pfm-eat-click title="Create Playlist"><i class="icon-plus"></i></a>
-								<a href="/account/playlists" ng-class="{selected: $state.is('account-content-playlists')}" title="View Playlists" class="view-all"><i class="icon-list"></i></a>
-								Playlists
-							</h3>
-						</li>
-						<li class="none" ng-show="!playlists.length"><span>no pinned playlists</span></li>
-						<li class="dropdown" ng-repeat="playlist in playlists" ng-cloak ng-class="{selected: $state.is('playlist') && $state.params.id == playlist.id}">
-							<a class="menu dropdown-toggle" pfm-eat-click href="#"><i class="icon-ellipsis-vertical"></i></a>
-							<a href="{{Helpers::angular('playlist.url')}}" ng-bind="playlist.title"></a>
+			@if (Auth::check())
+				<li ng-class="{selected: $state.includes('account-content') || isActive('/account')}"><a href="/account/tracks">Account <i class="icon-user"></i></a></li>
+			@endif
 
-							<ul class="dropdown-menu">
-								<li><a href="#" pfm-eat-click ng-click="editPlaylist(playlist)">Edit</a></li>
-								<li><a href="#" pfm-eat-click ng-click="unpinPlaylist(playlist)">Unpin</a></li>
-								<li><a href="#" pfm-eat-click ng-click="deletePlaylist(playlist)" ng-show="playlist.user_id == auth.user_id">Delete</a></li>
-							</ul>
-						</li>
+			<li ng-class="{selected: isActive('/about')}"><a href="/about">Meta <i class="icon-info"></i></a></li>
 
-						<li>
-							<h3>
-								<a href="#" title="Upload Track"><i class="icon-upload"></i></a>
-								Account
-							</h3>
-						</li>
-						{{-- <li ng-class="{selected: $state.includes('account-favourites')}"><a href="/account/favourites">Favourites</a></li> --}}
-						<li ng-class="{selected: $state.includes('account-content')}"><a href="/account/tracks">Your Content</a></li>
-						<li ng-class="{selected: isActive('/account')}"><a href="/account">Settings</a></li>
-					@endif
+			@if (Auth::check())
+				<li>
+					<h3>
+						<a href="#" ng-click="createPlaylist()" pfm-eat-click title="Create Playlist"><i class="icon-plus"></i></a>
+						<a href="/account/playlists" ng-class="{selected: $state.is('account-content-playlists')}" title="View Playlists" class="view-all"><i class="icon-list"></i></a>
+						Playlists
+					</h3>
+				</li>
+				<li class="none" ng-show="!playlists.length"><span>no pinned playlists</span></li>
+				<li class="dropdown" ng-repeat="playlist in playlists" ng-cloak ng-class="{selected: $state.is('playlist') && $state.params.id == playlist.id}">
+					<a class="menu dropdown-toggle" pfm-eat-click href="#"><i class="icon-ellipsis-vertical"></i></a>
+					<a href="{{Helpers::angular('playlist.url')}}" ng-bind="playlist.title"></a>
 
-					<li><h3>Meta</h3></li>
-
-					@if (!Auth::check())
-						<li ng-class="{selected: isActive('/login')}"><a href="/login">Login</a></li>
-						{{-- <li ng-class="{selected: isActive('/register')}"><a href="/register">Register</a></li> --}}
-					@endif
-
-					<li ng-class="{selected: isActive('/about')}"><a href="/about">About</a></li>
-					<li ng-class="{selected: isActive('/faq')}"><a href="/faq">FAQ</a></li>
-
-					@if (Auth::check())
-						<li><a href="#" ng-click="logout()" pfm-eat-click>Logout</a></li>
-					@endif
-				</ul>
-			</nav>
-		</section>
+					<ul class="dropdown-menu">
+						<li><a href="#" pfm-eat-click ng-click="editPlaylist(playlist)">Edit</a></li>
+						<li><a href="#" pfm-eat-click ng-click="unpinPlaylist(playlist)">Unpin</a></li>
+						<li><a href="#" pfm-eat-click ng-click="deletePlaylist(playlist)" ng-show="playlist.user_id == auth.user_id">Delete</a></li>
+					</ul>
+				</li>
+			@endif
+		</ul>
 		<ui-view class="site-content">
 			@yield('app_content')
 		</ui-view>
@@ -86,17 +61,7 @@
 
 @section('scripts')
 
-	<div id="fb-root"></div>
-
 	<script>
-		(function(d, s, id) {
-			var js, fjs = d.getElementsByTagName(s)[0];
-			if (d.getElementById(id)) return;
-			js = d.createElement(s); js.id = id;
-			js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=186765381447538";
-			fjs.parentNode.insertBefore(js, fjs);
-		}(document, 'script', 'facebook-jssdk'));
-
 		window.pfm = {
 			token: "{{Session::token()}}",
 			auth: {
diff --git a/app/views/shared/_layout.blade.php b/app/views/shared/_layout.blade.php
index 197264d9..3d3c33e0 100644
--- a/app/views/shared/_layout.blade.php
+++ b/app/views/shared/_layout.blade.php
@@ -11,9 +11,6 @@
 		@yield('styles')
 	</head>
 	<body ng-app="ponyfm" ng-controller="application" uploader>
-		<div class="background-color"></div>
-		<div class="background-two"></div>
-		<div class="background-one"></div>
 		@yield('content')
 		@yield('scripts')
 	</body>
diff --git a/public/images/poniverse-logo.png b/public/images/poniverse-logo.png
new file mode 100644
index 00000000..1119b4d1
Binary files /dev/null and b/public/images/poniverse-logo.png differ
diff --git a/public/scripts/shared/layout.coffee b/public/scripts/shared/layout.coffee
index e2c0f562..503fb7be 100644
--- a/public/scripts/shared/layout.coffee
+++ b/public/scripts/shared/layout.coffee
@@ -1,11 +1,11 @@
 window.handleResize = () ->
 	windowHeight = $(window).height()
 	$siteBody = $ '.site-body'
-	$siteBody.height windowHeight - $('header').height() - 1
+	$siteBody.height windowHeight - $('header').height()
 
 	$('.stretch-to-bottom').each () ->
 		$this = $ this
-		newHeight = windowHeight - $this.offset().top + 1
+		newHeight = windowHeight - $this.offset().top
 		if newHeight > 0
 			$this.height newHeight
 
@@ -16,11 +16,6 @@ window.handleResize = () ->
 		$this.css
 			height: '15em'
 
-#		if $this.height() > $this.data 'real-height'
-#			$this.css {height: 'auto'}
-#			$this.find('.reveal').css {display: 'none'}
-#			return
-
 		$this.find('.reveal').click (e) ->
 			e.preventDefault()
 			$this.css {height: 'auto'}
diff --git a/public/styles/account-content.less b/public/styles/account-content.less
index 63f06948..8f643102 100644
--- a/public/styles/account-content.less
+++ b/public/styles/account-content.less
@@ -1,436 +1,2 @@
 @import-once 'base/bootstrap/bootstrap';
 @import-once 'mixins';
-
-@media (max-width: 1200px) {
-  html {
-	.license-grid {
-	  li {
-		width: 50%;
-
-		> div {
-		  margin: 5px !important;
-		}
-	  }
-	}
-  }
-}
-
-.account-settings-form {
-}
-
-ul.playlists {
-  overflow-y: auto;
-  margin: 0px;
-  padding: 0px;
-  list-style: none;
-  margin: 0px 5px;
-  margin-top: 10px;
-
-  li {
-	overflow: hidden;
-	margin: 0px;
-	padding: 0px;
-	height: 40px;
-	border-bottom: 1px solid #ddd;
-
-	img {
-	  border-right: 1px solid #ddd;
-	  padding: 0px;
-	  display: block;
-	  height: 40px;
-	  width: 40px;
-	  float: left;
-	}
-
-	.btn-group {
-	  float: right;
-	  display: block;
-	  margin-top: 7px;
-	  margin-right: 7px;
-
-	  .btn {
-		.border-radius(0px);
-	  }
-	}
-
-	a.main {
-	  display: block;
-	  text-decoration: none;
-	  color: #444;
-
-	  .is-public {
-		display: block;
-		float: right;
-		font-weight: bold;
-		margin-top: 10px;
-		margin-right: 10px;
-		font-size: 8pt;
-	  }
-
-	  .title {
-		.ellipsis();
-		margin-left: 50px;
-		line-height: 40px;
-		height: 40px;
-		display: block;
-	  }
-
-	  &:hover {
-		background: #eee;
-	  }
-	}
-  }
-}
-
-.image-selector {
-  width: 500px;
-  max-height: 300px;
-  overflow-y: auto;
-
-  ul {
-	list-style: none;
-	padding: 0px;
-	margin: 0px;
-
-	li {
-	  margin: 0px;
-	  float: left;
-	  width: 20%;
-	  cursor: pointer;
-
-	  img {
-		.transition(all 400ms);
-		display: block;
-		width: 100px;
-		height: 100px;
-	  }
-
-	  &:hover {
-		img {
-		  opacity: .8;
-		}
-	  }
-	}
-  }
-}
-
-html {
-  .two-pane-view.closed {
-	.account-albums-listing {
-	  li {
-		.box-sizing(border-box);
-		width: 20%;
-
-		a {
-		  padding: 15px;
-
-		  .image {
-			.img-polaroid();
-			position: relative;
-			left: -5px;
-			width: 100%;
-			height: auto;
-			float: none;
-		  }
-
-		  .title {
-			margin: 0px;
-			font-size: 12pt;
-			padding: 0px;
-			margin-top: 5px;
-		  }
-
-		  .published {
-			margin: 0px;
-			padding: 0px;
-		  }
-		}
-	  }
-	}
-  }
-}
-
-.account-tracks-listing, .account-albums-listing {
-  overflow-y: auto;
-  margin: 0px;
-  padding: 0px;
-  list-style: none;
-
-  li {
-	.box-sizing(border-box);
-
-	padding: 0px;
-	margin: 0px;
-	line-height: normal;
-
-	&.empty {
-	  .alert();
-	  float: none !important;
-	  width: auto !important;
-	  display: block;
-	  padding: 5px;
-	  font-size: 9pt;
-	}
-
-	&.is-not-published a {
-	  background: fadeout(@yellow, 90%);
-	}
-
-	&.selected, &.selected:hover {
-	  a {
-		#gradient>.vertical(#149bdf, #0480be);
-		cursor: default;
-		color: #fff;
-
-		.published {
-		  color: #eee;
-		}
-	  }
-	}
-
-	a {
-	  .transition(350px ease-out all);
-
-	  display: block;
-	  margin: 0px;
-	  padding: 5px;
-	  font-size: 9pt;
-	  font-weight: normal;
-	  overflow: hidden;
-
-	  .image {
-		width: 32px;
-		height: 32px;
-		float: left;
-		display: block;
-	  }
-
-	  .title {
-		.ellipsis();
-		display: block;
-		margin-left: 37px;
-	  }
-
-	  .published {
-		display: block;
-		color: #777;
-		margin-left: 37px;
-		font-size: 8pt;
-	  }
-
-	  &:hover {
-		background: #ddd;
-		text-decoration: none;
-	  }
-	}
-  }
-}
-
-.two-pane-view {
-  .list {
-	.dropdowns {
-	  margin-top: 0px;
-	}
-  }
-
-  .editor {
-	display: none;
-
-	.album-track-listing {
-	  padding: 0px;
-	  clear: both;
-	  margin: 0px;
-	  margin-top: 10px;
-	  list-style: none;
-
-	  li {
-		overflow: hidden;
-		line-height: normal;
-		padding: 0px;
-		margin: 0px;
-		font-size: 8pt;
-		border-bottom: 1px dashed #ddd;
-
-		div {
-		  padding: 2px;
-		}
-
-		span {
-		  display: block;
-		  float: left;
-		  margin-left: 5px;
-		  margin-top: 2px;
-		}
-
-		.btn {
-		  line-height: normal;
-		  padding: 2px 5px;
-		  margin: 0px;
-		}
-
-		&.ui-sortable-helper {
-		  #gradient>.vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
-		  border: none;
-		  color: #fff;
-		}
-
-		&.ui-sortable-placeholder {
-		  background: @yellow;
-		}
-	  }
-	}
-
-	.show-songs, .album {
-	  .btn {
-		display: block;
-		float: none;
-	  }
-	}
-
-	.show-songs, .album, .track-selector {
-	  .btn {
-		.border-radius(0px);
-		padding: 3px 10px;
-		font-size: 8pt;
-		text-align: left;
-	  }
-
-	  .error {
-		margin-top: 10px;
-	  }
-
-	  .pfm-popup {
-		width: 300px;
-
-		ul {
-		  margin: 0px;
-		  padding: 0px;
-		  list-style: none;
-
-		  li {
-			margin: 0px;
-			padding: 0px;
-
-			a {
-			  .ellipsis();
-			  display: block;
-			  padding: 3px 10px;
-			  font-size: 8pt;
-			  color: #333333;
-
-			  &:hover {
-				#gradient>.vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
-				text-decoration: none;
-				color: @dropdownLinkColorHover;
-			  }
-			}
-
-			&.selected {
-			  a {
-				#gradient>.vertical(@green, darken(@green, 5%));
-				color: #fff;
-				font-weight: bold;
-
-				&:hover {
-				  #gradient>.vertical(fadeout(@green, 20%), fadeout(darken(@green, 5%), 20%));
-				}
-			  }
-			}
-		  }
-		}
-	  }
-	}
-  }
-
-  &.closed {
-	.account-tracks-listing, .account-albums-listing {
-	  .clearfix();
-
-	  li {
-		float: left;
-		width: 25%;
-
-		&.empty {
-		}
-	  }
-	}
-  }
-
-  &.open {
-	.list {
-	  .box-shadow(2px 0px 2px rgba(0, 0, 0, 0.2));
-
-	  width: 250px;
-	  float: left;
-	}
-
-	.editor {
-	  margin-left: 260px;
-	  margin-right: 10px;
-	  display: block;
-
-	  .stretch-to-bottom {
-		overflow-y: auto;
-		padding-right: 10px;
-	  }
-	}
-  }
-}
-
-.license-grid {
-  margin: 0px;
-  padding: 0px;
-  overflow: hidden;
-  list-style: none;
-
-  li {
-	float: left;
-	width: 25%;
-
-	> div {
-	  margin: 0px 5px;
-	  border: 1px solid #ddd;
-	  padding: 10px;
-	  cursor: pointer;
-
-	  strong {
-		font-size: 9pt;
-		display: block;
-		margin: 0px;
-		margin-bottom: 5px;
-		padding: 0px;
-		line-height: normal;
-	  }
-	}
-
-	p {
-	  min-height: 120px;
-	  font-size: 9pt;
-	}
-
-	a {
-	  .border-radius(0px);
-	  display: block;
-	  width: auto;
-	}
-
-	&.selected {
-	  > div {
-		cursor: default;
-		border-color: @blue;
-	  }
-	}
-
-	&:hover > div {
-	  border: 1px solid #3366CC;
-	}
-
-	&:first-child > div {
-	  margin-left: 0px;
-	}
-
-	&:last-child > div {
-	  margin-right: 0px;
-	}
-  }
-}
\ No newline at end of file
diff --git a/public/styles/albums.less b/public/styles/albums.less
deleted file mode 100644
index de9f49f8..00000000
--- a/public/styles/albums.less
+++ /dev/null
@@ -1,99 +0,0 @@
-@import-once 'base/bootstrap/bootstrap';
-@import-once 'mixins';
-
-.albums-listing, .artist-listing {
-  overflow-y: auto;
-  margin: 0px;
-  padding: 0px;
-  list-style: none;
-
-  li {
-	.box-sizing(border-box);
-	width: 20%;
-
-	float: left;
-	padding: 0px;
-	margin: 0px;
-	line-height: normal;
-
-	&.empty {
-	  .alert();
-	  .border-radius(0px);
-	  float: none !important;
-	  width: auto !important;
-	  display: block;
-	  margin-top: 5px;
-	  padding: 5px;
-	  font-size: 9pt;
-	}
-
-	&.is-not-published a {
-	  background: fadeout(@yellow, 90%);
-	}
-
-	&.selected, &.selected:hover {
-	  a {
-		#gradient>.vertical(#149bdf, #0480be);
-		cursor: default;
-		color: #fff;
-
-		.published {
-		  color: #eee;
-		}
-	  }
-	}
-
-	a {
-	  .transition(350px ease-out all);
-
-	  display: block;
-	  margin: 0px;
-	  font-size: 9pt;
-	  font-weight: normal;
-	  overflow: hidden;
-	  padding: 15px;
-
-	  .image {
-	  }
-
-	  .title {
-		margin: 0px;
-		font-size: 12pt;
-		padding: 0px;
-		margin-top: 5px;
-	  }
-
-	  .published {
-		margin: 0px;
-		padding: 0px;
-	  }
-
-	  .image {
-		.img-polaroid();
-		float: left;
-		display: block;
-		position: relative;
-		left: -5px;
-		width: 100%;
-		height: auto;
-		float: none;
-	  }
-
-	  .title {
-		.ellipsis();
-		display: block;
-	  }
-
-	  .published {
-		display: block;
-		color: #777;
-		font-size: 8pt;
-	  }
-
-	  &:hover {
-		background: #ddd;
-		text-decoration: none;
-	  }
-	}
-  }
-}
diff --git a/public/styles/animations.less b/public/styles/animations.less
index 970132ad..448c768e 100644
--- a/public/styles/animations.less
+++ b/public/styles/animations.less
@@ -1,6 +1,26 @@
 @import-once 'base/bootstrap/bootstrap';
 @import-once 'mixins';
 
+.fade-hide, .fade-show {
+  .transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) 350ms);
+}
+
+.fade-hide {
+  opacity:1;
+}
+
+.fade-hide.fade-hide-active {
+  opacity:0;
+}
+
+.fade-show {
+  opacity:0;
+}
+
+.fade-show.fade-show-active {
+  opacity:1;
+}
+
 .slide-down-enter, .slide-down-leave,
 .slide-up-enter, .slide-up-leave,
 .slide-right-enter, .slide-right-leave {
diff --git a/public/styles/app.less b/public/styles/app.less
index 5d65a583..e691d752 100644
--- a/public/styles/app.less
+++ b/public/styles/app.less
@@ -1,11 +1,14 @@
+@import url(http://fonts.googleapis.com/css?family=Josefin+Sans);
+
 @import 'base/bootstrap/bootstrap';
 @import 'base/font-awesome/font-awesome';
+@import 'variables';
 @import 'mixins';
 @import 'layout';
-@import 'home';
 @import 'account-content';
 @import 'components';
 @import 'forms';
-@import 'tracks';
-@import 'albums';
-@import 'animations';
\ No newline at end of file
+@import 'animations';
+@import 'body';
+@import 'player';
+@import 'tracks';
\ No newline at end of file
diff --git a/public/styles/body.less b/public/styles/body.less
new file mode 100644
index 00000000..71d9ae02
--- /dev/null
+++ b/public/styles/body.less
@@ -0,0 +1,27 @@
+@import-once 'variables';
+@import-once 'base/bootstrap/bootstrap';
+
+.site-content{
+  .box-sizing(border-box);
+  padding: 10px;
+
+  h1 {
+	margin: 0px;
+	margin-bottom: 5px;
+	font-size: 15pt;
+	color: @pfm-purple;
+	line-height: normal;
+	overflow: hidden;
+	font-weight: normal;
+
+	a {
+	  color: #555;
+	  float: right;
+	  font-size: 10pt;
+
+	  &:hover {
+		text-decoration: none;
+	  }
+	}
+  }
+}
diff --git a/public/styles/components.less b/public/styles/components.less
index e4f3aaa1..fc4d205f 100644
--- a/public/styles/components.less
+++ b/public/styles/components.less
@@ -1,27 +1,159 @@
 @import-once 'base/bootstrap/bootstrap';
 @import-once 'mixins';
+@import-once 'variables';
 
-.fade-hide, .fade-show {
-  .transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) 350ms);
+.stretch-to-bottom {
+  overflow-y: auto;
 }
 
-.fade-hide {
-  opacity:1;
+.dropdowns {
+  .clearfix();
+  list-style: none;
+  padding: 0px;
+  margin: 0px;
+  margin-bottom: 10px;
+
+  > li {
+	float: left;
+	margin: 0px;
+	padding: 0px;
+	margin-right: 10px;
+	line-height: normal;
+
+	&.open {
+	  > .btn {
+		background: @pfm-purple;
+		color: #fff;
+	  }
+
+	  .dropdown-menu {
+		.box-shadow(none);
+
+		margin: 0px;
+		border: 2px solid @pfm-purple;
+
+		li.selected {
+		  a {
+			background: @pfm-purple;
+			color: #fff;
+		  }
+		}
+
+		li {
+		  a:hover {
+			background: lighten(@pfm-purple, 5%);
+		  }
+		}
+	  }
+	}
+
+	> .btn {
+	  border: none;
+	  background: #eee;
+	  font-size: 8pt;
+	  padding: 3px 7px;
+	  text-shadow: none;
+
+	  &.btn-info {
+		background: @pfm-purple;
+	  }
+	}
+  }
 }
 
-.fade-hide.fade-hide-active {
-  opacity:0;
+.tabs {
+  .clearfix();
+
+  list-style: none;
+  padding: 0px;
+  margin: 0px;
+  margin-bottom: 10px;
+  border-bottom: 4px solid #ddd;
+  font-size: 15px;
+
+  li {
+	margin: 0px;
+	float: left;
+	line-height: normal;
+
+	a {
+	  padding: 5px 13px;
+	  display: block;
+	  color: #555;
+
+	  &:hover {
+		text-decoration: none;
+	  }
+	}
+
+	&.active {
+	  a {
+		background: #eee;
+		color: #000;
+		border-bottom: 4px solid @pfm-purple;
+		margin-bottom: -4px;
+	  }
+	}
+  }
 }
 
-.fade-show {
-  opacity:0;
+ui-view {
+  display: block;
+
+  &:before {
+	.transition(opacity 250ms);
+
+	opacity: 0;
+	background: #fff;
+	content: ' ';
+	top: 0px;
+	left: 0px;
+	z-index: 999;
+	width: 0px;
+	height: 0px;
+	position: absolute;
+	display: block;
+	overflow: hidden;
+  }
+
+  &.loading {
+	position: relative;
+
+	&:before {
+	  opacity: .8;
+	  width: 100%;
+	  height: 100%;
+	}
+  }
 }
 
-.fade-show.fade-show-active {
-  opacity:1;
+.toolbar {
+  #gradient>.vertical(#555, #222);
+  list-style: none;
+  margin: 0px;
+  margin-bottom: 10px;
+  padding: 0px;
+  overflow: hidden;
+
+  li {
+	float: left;
+
+	a, button {
+	  .border-radius(0px);
+	  font-size: 9pt;
+	}
+
+	&.delete {
+	  float: right;
+	}
+  }
 }
 
 html body {
+  .btn {
+	.border-radius(0px);
+  }
+
   .ui-datepicker {
 	.border-radius(0px);
 
@@ -34,9 +166,11 @@ html body {
 	  border-bottom: 1px solid #777;
 	  margin: -3px;
 	}
+  }
 
-	.ui-datepicker-calendar {
-	}
+  .alert {
+	.border-radius(0px);
+	margin-bottom: 10px;
   }
 }
 
@@ -73,48 +207,6 @@ html .dropdown-menu {
   }
 }
 
-.dropdowns {
-  .clearfix();
-
-  list-style: none;
-  padding: 0px;
-  margin: 10px 0px;
-
-  > li {
-	margin: 0px;
-	margin-right: 5px;
-	padding: 0px;
-	float: left;
-
-	> a {
-	  .border-radius(0px);
-	  padding: 3px 10px;
-	  font-size: 8pt;
-	}
-
-	ul {
-	  .border-radius(0px);
-	  padding: 0px;
-
-	  li.selected {
-		a {
-		  background: @blue;
-		  color: #fff;
-
-		  &:hover {
-			background: fadeout(@blue, 20%);
-		  }
-		}
-	  }
-
-	  a {
-		padding: 3px 10px;
-		font-size: 8pt;
-	  }
-	}
-  }
-}
-
 .pfm-popup {
   .box-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
   z-index: 1000;
@@ -184,10 +276,6 @@ html .dropdown-menu {
   form {
 	margin: 0px;
   }
-
-  .btn {
-	.border-radius(0px);
-  }
 }
 
 html {
@@ -200,8 +288,9 @@ html {
 
   .pagination {
 	border: none;
-	background: #ddd;
-	margin: 5px 0px;
+	background: #eee;
+	margin: 0px;
+	margin-bottom: 10px;
 	padding: 0px;
 	overflow: hidden;
 
@@ -225,11 +314,12 @@ html {
 		  padding: 1px 10px;
 		  display: block;
 		  float: left;
+		  color: @pfm-purple;
 		}
 	  }
 
 	  li.active a {
-		background: #444;
+		background: @pfm-purple;
 		color: #ddd;
 	  }
 	}
diff --git a/public/styles/forms.less b/public/styles/forms.less
index d760621b..b8fba33d 100644
--- a/public/styles/forms.less
+++ b/public/styles/forms.less
@@ -1,98 +1,71 @@
-.pfm-form, .editor {
-  .form-row {
-	margin-bottom: 10px;
+@import-once "base/bootstrap/bootstrap";
 
-	.error {
-	  .alert();
-	  .alert-error();
+.form-row {
+  margin-bottom: 10px;
 
-	  display: none;
-	  padding: 3px;
-	  font-size: 8pt;
-	}
+  .error {
+	.alert();
+	.alert-error();
 
-	.alert {
-	  padding: 3px;
-	  font-size: 8pt;
-	}
-  }
-
-  .has-error {
-	label {
-	  color: @red;
-	}
-
-	.error {
-	  display: block;
-	}
+	display: none;
+	padding: 3px;
+	font-size: 8pt;
   }
 
   .alert {
-	.border-radius(0px);
-	margin-bottom: 10px;
-  }
-
-  .toolbar {
-	#gradient>.vertical(#555, #222);
-	list-style: none;
-	margin: 0px;
-	margin-bottom: 10px;
-	padding: 0px;
-	overflow: hidden;
-
-	li {
-	  float: left;
-
-	  a, button {
-		.border-radius(0px);
-		font-size: 9pt;
-	  }
-
-	  &.delete {
-		float: right;
-	  }
-	}
-  }
-
-  label.strong {
-	font-size: 8pt;
-	font-weight: bold;
-  }
-
-  input[type="text"], input[type="password"], input[type="date"], textarea {
 	padding: 3px;
-	border: 1px solid;
-	border-color: #9c9c9c #9c9c9c #ccc #ccc;
-  }
-
-  input[type="text"], input[type="password"], input[type="date"], textarea, select {
-	.border-radius(0px);
-	.box-sizing(border-box);
-
-	display: block;
-	font-size: 12px;
-	width: 100%;
-
-	&:focus {
-	  .box-shadow(none);
-	}
-  }
-
-  select {
-	height: auto;
-	line-height: normal;
-	padding: 0px;
+	font-size: 8pt;
   }
+}
 
+.has-error {
   label {
-	input[type="checkbox"] {
-	  margin: 0px;
-	  margin-top: -2px;
-	  vertical-align: middle;
-	}
+	color: @red;
   }
 
-  textarea {
-	height: 60px;
+  .error {
+	display: block;
   }
-}
\ No newline at end of file
+}
+
+label.strong {
+  font-size: 8pt;
+  font-weight: bold;
+}
+
+input[type="text"], input[type="password"], input[type="date"], textarea {
+  padding: 3px;
+  border: 1px solid;
+  border-color: #9c9c9c #9c9c9c #ccc #ccc;
+}
+
+input[type="text"], input[type="password"], input[type="date"], textarea, select {
+  .border-radius(0px);
+  .box-sizing(border-box);
+
+  display: block;
+  font-size: 12px;
+  width: 100%;
+
+  &:focus {
+	.box-shadow(none);
+  }
+}
+
+select {
+  height: auto;
+  line-height: normal;
+  padding: 0px;
+}
+
+label {
+  input[type="checkbox"] {
+	margin: 0px;
+	margin-top: -2px;
+	vertical-align: middle;
+  }
+}
+
+textarea {
+  height: 60px;
+}
diff --git a/public/styles/home.less b/public/styles/home.less
deleted file mode 100644
index a4821fa5..00000000
--- a/public/styles/home.less
+++ /dev/null
@@ -1,4 +0,0 @@
-.home-container {
-  max-width: 900px;
-  margin: auto;
-}
\ No newline at end of file
diff --git a/public/styles/layout.less b/public/styles/layout.less
index 7470ecb3..ca75eeb3 100644
--- a/public/styles/layout.less
+++ b/public/styles/layout.less
@@ -1,697 +1,144 @@
 @import-once 'base/bootstrap/bootstrap';
 @import-once 'mixins';
+@import-once 'variables';
 
 html, body {
-  height: 100%;
 }
 
 html body {
   height: 100%;
-  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-  background: url('http://mlpforums.com/public/style_images/mlp/bg1.png');
+  background: @pfm-dark-grey;
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 }
 
-.background-color {
-  background: rgba(42, 42, 42, 1);
-  position: fixed;
-  left: 0px;
-  top: 0px;
-  width: 50%;
-  height: 100%;
-  z-index: -5;
-}
-
-ui-view {
-  display: block;
-
-  &:before {
-	.transition(opacity 250ms);
-
-	opacity: 0;
-	background: #fff;
-	content: ' ';
-	top: 0px;
-	left: 0px;
-	z-index: 999;
-	width: 0px;
-	height: 0px;
-	position: absolute;
-	display: block;
-	overflow: hidden;
-  }
-
-  &.loading {
-	position: relative;
-
-	&:before {
-	  opacity: .8;
-	  width: 100%;
-	  height: 100%;
-	}
-  }
+header, .site-body {
+  .box-shadow(0 0 7px rgba(0, 0, 0, .3));
+  max-width: 1200px;
+  margin: auto;
 }
 
 header {
-  .clearfix();
-  .box-shadow(0px 1px 8px rgba(0, 0, 0, 0.2));
-  background: #222;
-
-  > div {
-	max-width: 1200px;
-	margin: auto;
-  }
-
-  position: relative;
-  color: #fff;
-
-  h1 {
-	font-size: 14pt;
-	margin: 0px;
-	padding: 0px 10px;
-	line-height: 47px;
+  > a {
+	display: block;
 	float: left;
-	width: 130px;
+	width: (@pfm-sidebar-size - 25);
+	height: 64px;
+	line-height: 52px;
+	background: @pfm-purple;
+	color: #fff;
+	font-size: 24pt;
+	padding-left: 25px;
+	font-weight: lighter;
+	position: relative;
+	z-index: 600;
+	font-family: 'Josefin Sans', sans-serif;
 
-	a {
+	&:hover {
+	  background: darken(@pfm-purple, 25%);
+	  color: #fff;
 	  text-decoration: none;
-	  color: rgba(255, 255, 255, .6);
-
-	  &:hover {
-		color: #aaa;
-		text-decoration: none;
-	  }
-	}
-  }
-
-  .now-playing {
-	.clearfix();
-	margin-top: 5px;
-	padding-left: 5px;
-	margin-left: 149px;
-	background: #222;
-
-	.current-track {
-	  margin-top: 4px;
-	}
-
-	.image {
-	  float: left;
-	  width: 40px;
-	  height: 40px;
-	  background: #aaa;
-
-	  img {
-		display: block;
-		width: 100%;
-		height: 100%;
-	  }
-	}
-
-	.transport {
-	  margin-top: -3px;
-	  margin-bottom: 3px;
-	  margin-left: 46px;
-	  height: 5px;
-	  background: #555;
-	  position: relative;
-	  margin-right: 6px;
-	  cursor: pointer;
-
-	  &:hover {
-	  }
-
-	  .bar, .loader-bar {
-		position: absolute;
-		height: 100%;
-		top: 0px;
-		left: 0px;
-	  }
-
-	  .loader-bar {
-		background: #888;
-		z-index: 200;
-	  }
-
-	  .bar {
-		background: #fd8500;
-		z-index: 500;
-	  }
-	}
-
-	.title {
-	  margin-left: 45px;
-
-	  .artist, .song {
-		.ellipsis();
-		display: block;
-		line-height: normal;
-
-		a:hover {
-		  text-decoration: none;
-		  color: #3587CC;
-		}
-	  }
-
-	  .artist a {
-		color: #ddd;
-		font-size: 8pt;
-	  }
-
-	  .song a {
-		color: #fff;
-	  }
-	}
-
-	.buttons {
-	  float: right;
-	  margin: 0px;
-	  padding: 0px;
-	  list-style: none;
-	  margin-top: 3px;
-	  margin-right: 5px;
-
-	  li {
-		float: left;
-		margin: 0px;
-		padding: 0px;
-		position: relative;
-
-		a {
-		  display: block;
-		  float: left;
-		  font-size: 16px;
-		  padding: 5px 10px;
-		  color: #ddd;
-		}
-
-		.volume-slider {
-		  .box-shadow(0px 5px 9px rgba(50, 50, 50, 0.5));
-
-		  position: absolute;
-		  border-bottom: 1px solid #fff;
-		  border-top: 3px solid #3366CC;
-		  top: 30px;
-		  background: #eee;
-		  list-style: none;
-		  margin: 0px;
-		  display: none;
-		  width: 100%;
-		  padding: 10px 0px;
-		  z-index: 300;
-
-		  .bar {
-			width: 5px;
-			height: 180px;
-			background: #aaa;
-			margin: auto;
-			position: relative;
-			cursor: pointer;
-
-			.knob {
-			  .border-radius(20px);
-			  height: 15px;
-			  width: 15px;
-			  display: block;
-			  background: #1F3D7B;
-			  border: 2px solid #1F3D7B;
-			  position: absolute;
-			  top: 0px;
-			  left: -7px;
-			  font-size: 1px;
-			  padding: 0px;
-			}
-		  }
-		}
-
-		&:hover, &.keep-open {
-		  #gradient>.vertical(#fff, #ddd);
-
-		  .volume-slider {
-			display: block;
-		  }
-
-		  a {
-			text-decoration: none;
-			color: #000;
-		  }
-		}
-	  }
-	}
-  }
-
-  nav ul {
-	.navigation-list-horiz();
-	float: left;
-	margin-top: 19px;
-
-	li {
-	  line-height: 28px;
-	}
-
-	a {
-	  position: relative;
-	  padding: 0px 20px;
-	  color: #ddd;
-	  z-index: 1;
-	  overflow: hidden;
-
-	  .not-selectable();
-	  border: none;
-
-	  &:after {
-		#gradient>.vertical(#fff, #ddd);
-	  }
-
-	  &:before {
-		.transition(250ms top ease-out);
-		#gradient>.vertical(#5b9fdc, #1f79c2);
-	  }
-
-	  &:after, &:before {
-		position: absolute;
-		top: -100%;
-		left: 0px;
-		width: 100%;
-		height: 100%;
-		content: " ";
-		z-index: -1;
-	  }
-	}
-
-	li.selected, li.selected:hover {
-	  a {
-		cursor: default;
-		color: #fff;
-
-		&:after {
-		  display: none;
-		}
-
-		&:before {
-		  top: 0px;
-		}
-	  }
-	}
-
-	li:hover {
-	  a {
-		text-decoration: none;
-		color: #000;
-
-		&:after {
-		  top: 0px;
-		}
-	  }
 	}
   }
 }
 
-.site-body {
-  max-width: 1200px;
-  margin: auto;
-
-  .sidebar {
-	height: 100%;
-	float: left;
-	width: 148px;
-	z-index: 2000;
-
-	nav {
-	  h3 {
-		color: rgba(255, 255, 255, .6);
-		font-size: 12px;
-		padding: 5px;
-		background: #222;
-		line-height: normal;
-		font-weight: bold;
-		margin: 0px;
-		position: relative;
-
-		a {
-		  .not-selectable();
-
-		  display: block;
-		  position: absolute;
-		  right: 0px;
-		  top: 0px;
-		  padding: 5px;
-		  line-height: normal;
-		  text-decoration: none;
-		  font-size: 12px;
-		  width: 22px;
-		  text-align: center;
-		  color: rgba(255, 255, 255, .7);
-
-		  &.selected, &.selected:hover {
-			color: @blue;
-			cursor: default;
-		  }
-
-		  &:hover {
-			color: #fff;
-		  }
-
-		  &.view-all {
-			right: 22px;
-		  }
-		}
-	  }
-
-	  > ul {
-		margin: 0px;
-		padding: 0px;
-		list-style: none;
-
-		> li {
-		  margin: 0px;
-		  padding: 0px;
-		  line-height: normal;
-
-		  .dropdown-menu {
-			width: 148px;
-			min-width: 148px;
-		  }
-
-		  > a {
-			.border-radius(0px);
-			.not-selectable();
-			.ellipsis();
-
-			font-size: 12px;
-			margin: 0px;
-			border: none;
-			color: rgba(255, 255, 255, .7);
-			font-weight: bold;
-			padding: 8px 5px;
-			line-height: normal;
-			display: block;
-			text-decoration: none;
-
-			i {
-			  float: right;
-			  width: 22px;
-			  text-align: center;
-			}
-
-			&:hover {
-			  color: #fff;
-			}
-
-			&.menu {
-			  float: right;
-			  font-size: 15px;
-			  display: none;
-			}
-		  }
-
-		  &:hover {
-			> a.menu {
-			  display: block;
-			}
-		  }
-
-		  &.selected, &.selected:hover {
-			> a:not(.menu) {
-			  color: @blue;
-			  cursor: default;
-			}
-		  }
-
-		  &.none {
-			span {
-			  display: block;
-			  padding: 8px 12px;
-			  color: #555;
-			  font-style: italic;
-			  font-size: 8pt;
-			}
-		  }
-		}
-	  }
-	}
-  }
-
-  .site-content {
-	.perspective();
-	overflow: hidden;
-	border: 5px solid #222;
-	border-top: none;
-	border-bottom: none;
-	position: relative;
-
-	height: 100%;
-	margin-left: 148px;
-
-	> div {
-	  .box-sizing(border-box);
-	  width: 100%;
-	  height: 100%;
-	  background: #fff;
-	  padding: 0px 15px;
-	  padding-top: 10px;
-	}
-  }
-}
-
-.inner-view {
+.now-playing {
+  margin-left: @pfm-sidebar-size;
+  height: 64px;
+  background: #eee;
   position: relative;
+  z-index: 500;
+}
 
-  > div {
-	width: 100%;
-	height: 100%;
-	background: #fff;
-	position: relative;
+.sidebar {
+  width: @pfm-sidebar-size;
+  height: 100%;
+  background: @pfm-light-grey;
+  float: left;
+  list-style: none;
+  padding: 0px;
+  margin: 0px;
+  font-size: 10pt;
+
+  li {
+	margin: 0px;
+	padding: 0px;
+	line-height: normal;
+
+	&.selected {
+	  background: #fff;
+
+	  > a {
+		color: #000;
+	  }
+	}
+
+	h3 {
+	  padding: 10px 25px;
+	  padding-right: 10px;
+	  margin: 0px;
+	  font-size: 10pt;
+	  color: #eee;
+	  background: darken(@pfm-light-grey, 10%);
+	  line-height: normal;
+
+	  a {
+		display: block;
+		float: right;
+		width: 20px;
+		text-align: center;
+		color: #fff;
+
+		&:hover {
+		  text-decoration: none;
+		  color: #000;
+		}
+	  }
+	}
+
+	.dropdown-menu a {
+	  color: #000;
+	}
+
+	&:hover > a.dropdown-toggle {
+	  display: block;
+	}
+
+	> a.dropdown-toggle {
+	  float: right;
+	  padding: 10px 0px;
+	  display: none;
+	}
+
+	> a {
+	  display: block;
+	  padding: 10px 25px;
+	  padding-right: 0px;
+	  overflow: hidden;
+	  color: #fff;
+
+	  > i {
+		display: block;
+		float: right;
+		width: 20px;
+		text-align: center;
+		margin-right: 10px;
+	  }
+
+	  &:hover {
+		text-decoration: none;
+	  }
+	}
   }
 }
 
 .site-content {
-  h1, h2 {
-	border: none;
-	background: none;
-	color: #747474;
-	font-weight: 300;
-	line-height: normal;
-	font-weight: normal;
-	margin: 0px;
-	padding: 5px 0px;
-
-	a {
-	  display: block;
-	  float: right;
-	  font-size: 10pt;
-	  margin-top: 8px;
-	  text-decoration: none;
-	}
-
-	.subtitle {
-	  font-size: 10pt;
-	  display: block;
-	  padding: 3px 0px;
-
-	  a {
-		float: none;
-		display: inline;
-	  }
-	}
-  }
-
-  h1 {
-	font-size: 24px;
-  }
-
-  h2 {
-	font-size: 20px;
-	border-bottom: 2px solid #ddd;
-	margin-bottom: 2px;
-  }
-}
-
-html {
-  .tabs {
-	.clearfix();
-	list-style: none;
-	border-bottom: 4px solid #ddd;
-	margin: 0px;
-	padding: 0px;
-
-	li {
-	  margin: 0px;
-	  padding: 0px;
-	  float: left;
-
-	  a {
-		display: block;
-		border: none;
-		background: none;
-		color: #747474;
-		font-weight: 300;
-		font-size: 15px;
-		line-height: normal;
-		font-weight: normal;
-		padding: 5px 10px;
-
-		&:hover {
-		  color: #000;
-		  text-decoration: none;
-		}
-	  }
-
-	  &.active {
-		a {
-		  color: #000;
-		  border-bottom: 4px solid orange;
-		  margin-bottom: -4px;
-		  cursor: default;
-		}
-	  }
-	}
-  }
+  overflow: hidden;
+  margin-left: @pfm-sidebar-size;
+  background: #fff;
+  height: 100%;
+  z-index: 100;
 }
 
 .file-over-notice {
   display: none;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, .8);
-  color: #fff;
-  z-index: 10000;
-
-  p {
-	width: 300px;
-	margin: auto;
-	display: table-cell;
-	vertical-align: middle;
-	text-align: center;
-	font-size: 24pt;
-	font-weight: bold;
-  }
-}
-
-body.file-over {
-  .file-over-notice {
-	display: table;
-  }
-}
-
-html {
-  .modal-backdrop {
-	background: rgba(0, 0, 0, .9);
-  }
-
-  .modal {
-	.border-radius(0px);
-  }
-
-  .modal-header, .modal-footer {
-	.border-radius(0px);
-  }
-}
-
-.overlay {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, .9);
-}
-
-.overlay.upload-dialog .inner {
-  .box-sizing(border-box);
-  max-width: 550px;
-  padding: 0px 20px;
-  padding-top: 10px;
-  height: 100%;
-  overflow-y: auto;
-  margin: auto;
-
-  h2 {
-	color: #fff;
-	font-size: 12pt;
-	margin: 0px;
-
-	span {
-	  display: block;
-	  float: right;
-	  font-size: 9pt;
-	  color: #ddd;
-	  text-decoration: underline;
-	}
-  }
-
-  .close-button {
-	.border-radius(0px);
-	width: auto;
-	margin-bottom: 10px;
-	float: none;
-	display: block;
-  }
-
-  .uploads {
-	margin: 0px;
-	padding: 0px;
-	list-style: none;
-
-	li {
-	  margin-bottom: 5px;
-	  background: #000;
-	  font-size: 9pt;
-	  position: relative;
-	  z-index: 1;
-	  color: #fff;
-	  border: 2px solid #444;
-
-	  p {
-		margin: 5px;
-		padding: 0px;
-	  }
-
-	  .bar {
-		position: absolute;
-		top: 0px;
-		left: 0px;
-		height: 100%;
-		background: @green;
-		z-index: -1;
-	  }
-
-	  &.has-error {
-		border-color: @red;
-
-		.bar {
-		  display: none;
-		}
-	  }
-
-	  &.is-processing {
-		border-color: @blue;
-
-		.bar {
-		  display: none;
-		}
-	  }
-	}
-  }
-}
-
-.upload-queue-leave {
-  .transition(400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all);
-  position: absolute;
-  display: block;
-}
-
-.upload-queue-leave.upload-queue-leave-active, .upload-queue-enter {
-  .transform(scale(0));
-  opacity: 0;
-}
-
-.upload-queue-leave {
-  .transform(scale(1));
-}
-
-.stretch-to-bottom {
-  overflow-y: auto;
 }
\ No newline at end of file
diff --git a/public/styles/player.less b/public/styles/player.less
new file mode 100644
index 00000000..59dfe51d
--- /dev/null
+++ b/public/styles/player.less
@@ -0,0 +1,101 @@
+@import-once 'variables';
+@import-once 'mixins';
+
+.track-player {
+  overflow: hidden;
+  padding: 10px;
+
+  .image {
+	float: left;
+	width: 43px;
+	height: 43px;
+
+	img {
+	  .img-polaroid();
+	  display: block;
+	  width: 100%;
+	  padding: 1px;
+	}
+  }
+
+  .inner {
+	margin-left: 55px;
+  }
+
+  .song, .artist {
+	.ellipsis();
+	line-height: normal;
+	display: block;
+
+	a {
+	  color: #555;
+
+	  &:hover {
+		text-decoration: none;
+		color: #111;
+	  }
+	}
+  }
+
+  .song {
+	font-weight: bold;
+  }
+
+  .volume-slider {
+	display: none;
+  }
+
+  .transport {
+	background: @pfm-light-grey;
+	height: 8px;
+	position: relative;
+	cursor: pointer;
+	margin-top: 4px;
+
+	.bar {
+	  z-index: 500;
+	  background: @pfm-purple;
+	}
+
+	.loader-bar {
+	  z-index: 200;
+	  background: #ddd;
+	}
+
+	.bar, .loader-bar {
+	  position: absolute;
+	  top: 0px;
+	  left: 0px;
+	  height: 100%;
+	}
+  }
+
+  .buttons {
+	list-style: none;
+	margin: 0px;
+	padding: 0px;
+	float: right;
+
+	li {
+	  line-height: normal;
+	  float: left;
+	  margin: 0px;
+	  padding: 0px;
+	  font-size: 15pt;
+
+	  > a {
+		display: block;
+		padding: 5px 0px;
+		width: 40px;
+		text-align: center;
+		color: #5A5A5A;
+
+		&:hover {
+		  text-decoration: none;
+		  background: darken(#eee, 10%);
+		  color: #000;
+		}
+	  }
+	}
+  }
+}
\ No newline at end of file
diff --git a/public/styles/tracks.less b/public/styles/tracks.less
index 84e1f7d9..bc0c3abc 100644
--- a/public/styles/tracks.less
+++ b/public/styles/tracks.less
@@ -1,161 +1,53 @@
 @import-once 'base/bootstrap/bootstrap';
 @import-once 'mixins';
+@import-once 'variables';
 
-.comments {
-  ul {
-	margin: 0px;
-	padding: 0px;
-	list-style: none;
-	margin-bottom: 5px;
+.tracks-listing.four-columns {
+  li {
+	float: left;
+	width: 25%;
+  }
+}
 
-	li {
-	  .clearfix();
-	  margin: 0px;
-	  padding: 3px;
-	  border-bottom: 1px solid #ddd;
+.tracks-listing.three-columns {
+  li {
+	float: left;
+	width: 33.3333%;
+  }
+}
 
-	  .meta {
-		font-size: 8pt;
-		float: right;
-	  }
-
-	  .content {
-		margin-left: 45px;
-
-	  }
-
-	  img {
-		.img-polaroid();
-
-		float: left;
-		width: 32px;
-		height: 32px;
-		padding: 2px;
-	  }
-	}
+.tracks-listing.two-columns {
+  li {
+	float: left;
+	width: 50%;
   }
 }
 
 .tracks-listing {
-  overflow-y: auto;
+  @icon-size: 42px;
+
   margin: 0px;
   padding: 0px;
   list-style: none;
 
-  &.no-artist {
-	li {
-	  .info {
-		.artist {
-		  display: none;
-		}
-	  }
-	}
-  }
-
-  &.condensed {
-	li {
-	  margin: 0px;
-	  border-bottom: 1px solid #ddd;
-	}
-  }
-
-  &.two-column {
-	li {
-	  .box-sizing(border-box);
-
-	  width: 50%;
-	  float: left;
-	  margin: 0px;
-	  padding: 5px;
-	}
-  }
-
-  &.four-column {
-	li {
-	  .box-sizing(border-box);
-
-	  width: 25%;
-	  float: left;
-	  margin: 0px;
-	  padding: 5px;
-	}
-  }
-
   li {
-	overflow: hidden;
-	margin: 10px 0px;
-	padding: 0px;
+	.clearfix();
+	.box-sizing(border-box);
+
 	line-height: normal;
-
-	&.empty {
-	  .alert();
-	  .border-radius(0px);
-	  float: none !important;
-	  width: auto !important;
-	  display: block;
-	  margin-top: 5px;
-	  padding: 5px;
-	  font-size: 9pt;
-
-	  &:hover {
-		background-color: @warningBackground;
-	  }
-	}
-
-	&.is-playing, &:hover.is-playing {
-	  background: #444;
-
-	  .icons {
-		span, a {
-		  color: #fff;
-		}
-	  }
-
-	  .info {
-		.title {
-		  color: rgba(255, 255, 255, .9);
-		}
-
-		.metadata {
-		  color: #ddd;
-		}
-	  }
-	}
-
-	&:hover {
-	  background: #eee;
-
-	  .image {
-		.play-button {
-		  display: block;
-		}
-	  }
-	}
-
-	&.is-favourited {
-	  .icon-favourite {
-		color: @orange;
-		text-decoration: none;
-
-		i {
-		  color: #FFD76E;
-		  text-shadow: 0px 0px 2px rgba(0,0,0,0.8);
-
-		  &:before {
-			content: "\f005"
-		  }
-		}
-	  }
-	}
+	margin: 5px 0px;
+	padding: 0px;
+	padding-right: 10px;
 
 	.image {
-	  height: 40px;
-	  width: 40px;
 	  float: left;
+	  width: @icon-size;
+	  height: @icon-size;
 	  position: relative;
 
 	  .play-button {
 		.transition(background 250ms ease-out);
+
 		position: absolute;
 		top: 0px;
 		left: 0px;
@@ -175,235 +67,91 @@
 	  }
 
 	  img {
-		.img-polaroid();
-		padding: 3px;
-		padding: 0px;
 		display: block;
-		height: 38px;
-		width: 38px;
+		width: 100%;
 	  }
 	}
 
 	.icons {
 	  float: right;
-	  font-size: 14px;
-	  margin-right: 2px;
-	  margin-top: 4px;
+	  display: block;
+	  margin-top: 5px;
 
-	  a {
-		text-decoration: none;
-	  }
-
-	  a, span {
-		display: block;
-		float: left;
-		margin: 0px 3px;
-		line-height: 0px;
-	  }
-
-	  .icon-microphone-off {
+	  i.icon-microphone-off {
 		opacity: .5;
 	  }
-	}
 
-	.info {
-	  text-decoration: none;
-	  display: block;
-	  padding: 3px 0px;
-	  margin-left: 40px;
-	  padding-left: 5px;
-	  line-height: normal;
-
-	  .title {
-		.ellipsis();
-		display: block;
-		text-decoration: none;
-		color: @blue;
-	  }
-
-	  .metadata {
-		margin-top: 3px;
-		display: block;
+	  i.icon-microphone-off, i.icon-microphone {
 		color: #777;
-		font-size: 8pt;
-	  }
-	}
-  }
-}
-
-.user-details {
-  .header {
-	.box-shadow(0px 2px 3px rgba(0, 0, 0, .3));
-	background: #eee;
-
-	h1 {
-	  padding: 5px;
-	}
-
-	.tabs {
-	  background: #f0f0f0;
-	  margin: 0px;
-	  border: none;
-	  border-top: 1px solid #ddd;
-	}
-  }
-}
-
-.user-details, .track-details, .album-details, .playlist-details {
-  .comments {
-	.alert {
-	  .border-radius(0px);
-	  margin: 5px 0px;
-	}
-
-	button {
-	  .border-radius(0px);
-	}
-  }
-
-  .stretch-to-bottom {
-	padding-top: 10px;
-  }
-
-  .cover-image {
-	img {
-	  .img-polaroid();
-	  .box-sizing(border-box);
-	  width: 100%;
-	  display: block;
-	  margin-bottom: 5px;
-	}
-
-	.btn {
-	  .border-radius(0px);
-	  display: block;
-	  width: 'auto';
-	  margin: 5px 0px;
-	}
-
-	.stats {
-	  margin: 0px;
-	  padding: 0px;
-	  list-style: none;
-
-	  li {
-		margin: 0px;
-		padding: 5px 0px;
-		border-bottom: 1px solid #ddd;
-	  }
-	}
-  }
-}
-
-.track-details, .album-details, .playlist-details {
-  h1 {
-  }
-
-  .lyrics {
-	font-size: 10pt;
-	color: #222;
-	position: relative;
-	overflow: hidden;
-	padding: 0px;
-	margin: 0px;
-
-	h2 {
-	}
-
-	.reveal {
-	  #gradient>.vertical(rgba(255,255,255,0), rgba(255,255,255,1));
-	  .box-sizing(border-box);
-	  position: absolute;
-	  top: 0px;
-	  left: 0px;
-	  width: 100%;
-	  height: 100%;
-	  z-index: 400;
-	  border: 2px solid #fff;
-	  cursor: pointer;
-
-	  &:hover {
-		border: 2px solid @blue;
 	  }
 
 	  a {
-		.box-sizing(border-box);
-		display: block;
-		position: absolute;
-		bottom: 0px;
-		left: 0px;
-		width: 100%;
-		background: #eee;
-		padding: 3px;
-		z-index: 500;
 		text-decoration: none;
-		font-size: 10pt;
-	  }
-	}
-  }
-}
-
-.track-details {
-  h1 {
-	margin-left: 55px;
-  }
-
-  .tracks-listing li .image .play-button {
-	display: block;
-  }
-
-  .tracks-listing {
-	float: left;
-	margin-top: 5px;
-  }
-
-  .tracks-listing li {
-	margin: 0px;
-	margin-bottom: 5px;
-	float: left;
-
-	.image {
-	  height: 50px;
-	  width: 50px;
-
-	  .play-button {
-		line-height: 48px;
-	  }
-
-	  img {
-		width: 48px;
-		height: 48px;
 	  }
 	}
 
-	.icons, .info {
-	  display: none;
-	}
-  }
-}
+	a.info {
+	  display: block;
+	  margin-left: (@icon-size + 10);
 
-html {
-  .track-toolbar {
-	padding: 5px;
+	  &:hover {
+		text-decoration: none;
+	  }
 
-	.btn:first-child, > .btn:last-child {
-	  .border-radius(0px);
+	  > span {
+		display: block;
+	  }
 	}
 
-	> .btn {
-	  border-right: none;
+	.title {
+	  .ellipsis();
+
+	  color: #000;
+	  margin-top: 5px;
 	}
 
-	.dropdown:first-child {
-	  border-right: 1px solid #cccccc;
+	.artist, .published-at, .genre {
+	  color: #777;
+	  font-size: 80%;
 	}
 
-	.dropdown {
+	.published-at {
 	  float: right;
-	  border-right: none;
+	}
 
-	  .btn-primary {
-		color: #fff;
+	.artist, .published-at {
+	  margin-top: 2px;
+	}
+
+	&:hover {
+	  background: #eee;
+
+	  .image {
+		.play-button {
+		  display: block;
+		}
+	  }
+	}
+
+	&.is-playing {
+	  background: #ddd;
+	}
+
+	&.is-favourited {
+	  .icons {
+		a.icon-favourite {
+		  color: @orange;
+		  text-decoration: none;
+
+		  i {
+			color: #FFD76E;
+			text-shadow: 0px 0px 2px rgba(0,0,0,0.8);
+
+			&:before {
+			  content: "\f005"
+			}
+		  }
+		}
 	  }
 	}
   }
diff --git a/public/styles/variables.less b/public/styles/variables.less
new file mode 100644
index 00000000..44d79593
--- /dev/null
+++ b/public/styles/variables.less
@@ -0,0 +1,5 @@
+@pfm-purple: #B885BD;
+@pfm-dark-grey: #646464;
+@pfm-light-grey: #969696;
+@pfm-light-purple: #dac5db;
+@pfm-sidebar-size: 160px;
diff --git a/public/templates/dashboard/index.html b/public/templates/dashboard/index.html
index 79356b2a..1695e528 100644
--- a/public/templates/dashboard/index.html
+++ b/public/templates/dashboard/index.html
@@ -1,11 +1,9 @@
-<div class="dashboard">
-	<section class="recent-tracks stretch-to-bottom">
-		<div>
-			<h1>
-				<a href="#"><i class="icon-music"></i> see more</a>
-				The Newest Tunes
-			</h1>
-			<pfm-tracks-list tracks="recentTracks" class="two-column"></pfm-tracks-list>
-		</div>
-	</section>
-</div>
\ No newline at end of file
+<section class="recent-tracks stretch-to-bottom">
+	<div>
+		<h1>
+			<a href="/tracks"><i class="icon-music"></i> see more</a>
+			The Newest Tunes
+		</h1>
+		<pfm-tracks-list tracks="recentTracks" class="two-columns"></pfm-tracks-list>
+	</div>
+</section>
diff --git a/public/templates/directives/player.html b/public/templates/directives/player.html
index edeeeea4..5577d688 100644
--- a/public/templates/directives/player.html
+++ b/public/templates/directives/player.html
@@ -1,15 +1,5 @@
-<div class="current-track" ng-show="player.isPlaying">
-	<div class="image">
-		<img ng-src="{{player.currentTrack.covers.thumbnail}}" />
-	</div>
-	<div class="transport" ng-click="seek($event)">
-		<div class="bar" pfm-progress-bar="player.currentTrack.progress"></div>
-		<div class="loader-bar" pfm-progress-bar="player.currentTrack.loadingProgress"></div>
-	</div>
+<div class="track-player" ng-show="player.isPlaying">
 	<ul class="buttons">
-		<li><a pfm-eat-click ng-click="playPrev()" class="previous" href="#"><i class="icon-th-list"></i></a></li>
-		<li><a pfm-eat-click ng-click="playPrev()" class="previous" href="#"><i class="icon-download-alt"></i></a></li>
-		<li><a pfm-eat-click ng-click="playPrev()" class="previous" href="#"><i class="icon-star"></i></a></li>
 		<li><a pfm-eat-click ng-click="playPrev()" class="previous" href="#"><i class="icon-fast-backward"></i></a></li>
 		<li>
 			<a pfm-eat-click ng-click="playPause()" class="play" href="#">
@@ -27,8 +17,17 @@
 			</div>
 		</li>
 	</ul>
-	<div class="title">
-		<span class="song"><a href="{{player.currentTrack.url}}">{{player.currentTrack.title}}</a></span>
-		<span class="artist"><a href="{{player.currentTrack.user.url}}">{{player.currentTrack.user.name}}</a></span>
+	<div class="image">
+		<img ng-src="{{player.currentTrack.covers.thumbnail}}" />
+	</div>
+	<div class="inner">
+		<div class="title">
+			<span class="song"><a href="{{player.currentTrack.url}}">{{player.currentTrack.title}}</a></span>
+			<span class="artist"><a href="{{player.currentTrack.user.url}}">{{player.currentTrack.user.name}}</a></span>
+		</div>
+		<div class="transport" ng-click="seek($event)">
+			<div class="bar" pfm-progress-bar="player.currentTrack.progress"></div>
+			<div class="loader-bar" pfm-progress-bar="player.currentTrack.loadingProgress"></div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/public/templates/directives/tracks-list.html b/public/templates/directives/tracks-list.html
index 2bee314c..7822f73b 100644
--- a/public/templates/directives/tracks-list.html
+++ b/public/templates/directives/tracks-list.html
@@ -13,11 +13,8 @@
 		</div>
 		<a class="info" href="{{track.url}}">
 			<span class="title">{{track.title}}</span>
-			<span class="metadata">
-				<span class="artist">by: {{track.user.name}} /</span>
-				<span class="genre">{{track.genre.name}}</span> /
-				{{track.published_at.date | momentFromNow}}
-			</span>
+			<span class="published-at">{{track.published_at.date | momentFromNow}}</span>
+			<span class="artist">{{track.user.name}} / {{track.genre.name}}</span>
 		</a>
 	</li>
 	<li ng-show="!tracks.length" class="empty">
diff --git a/public/templates/tracks/_layout.html b/public/templates/tracks/_layout.html
index 7d15e7d4..891a5568 100644
--- a/public/templates/tracks/_layout.html
+++ b/public/templates/tracks/_layout.html
@@ -1,11 +1,8 @@
-<div>
-	<ul class="tabs">
-		<li ng-class="{active: $state.includes('tracks.search')}"><a href="/tracks">Search</a></li>
-		<!--
-		<li ng-class="{active: $state.includes('tracks.popular')}"><a href="/tracks/popular">Popular</a></li>
-		<li ng-class="{active: $state.includes('tracks.random')}"><a href="/tracks/random">Random</a></li>
-		-->
-	</ul>
+<ul class="tabs">
+	<li ng-class="{active: $state.includes('tracks.search')}"><a href="/tracks">Tracks</a></li>
+	<li ng-class="{active: $state.includes('tracks.popular')}"><a href="/artists">Artists</a></li>
+	<li ng-class="{active: $state.includes('tracks.random')}"><a href="/albums">Albums</a></li>
+	<li ng-class="{active: $state.includes('tracks.random')}"><a href="/playlists">Playlists</a></li>
+</ul>
 
-	<ui-view></ui-view>
-</div>
\ No newline at end of file
+<ui-view></ui-view>
\ No newline at end of file
diff --git a/public/templates/tracks/search-list.html b/public/templates/tracks/search-list.html
index c5ec2ec5..f02ba057 100644
--- a/public/templates/tracks/search-list.html
+++ b/public/templates/tracks/search-list.html
@@ -1,3 +1,3 @@
 <div class="stretch-to-bottom">
-	<pfm-tracks-list tracks="tracks" class="two-column"></pfm-tracks-list>
+	<pfm-tracks-list tracks="tracks" class="two-columns"></pfm-tracks-list>
 </div>
\ No newline at end of file
