diff --git a/resources/assets/scripts/shared/layout.coffee b/resources/assets/scripts/shared/layout.coffee
index b32c7897..aeb490c7 100644
--- a/resources/assets/scripts/shared/layout.coffee
+++ b/resources/assets/scripts/shared/layout.coffee
@@ -21,9 +21,9 @@ window.handleResize = () ->
 	$siteBody = $ '.site-body'
 
 	if isMobile
-		$siteBody.height windowHeight - $('.now-playing').height() * 2
+		$siteBody.height windowHeight - ($('.top-bar').height() + $('.now-playing').height() + $('.search').height())
 	else
-		$siteBody.height windowHeight - $('header').height()
+		$siteBody.height windowHeight - ($('.top-bar').height() + $('.now-playing').height())
 
 	$('.dropdown-menu').each () ->
 		$this = $ this
diff --git a/resources/assets/styles/components/search.less b/resources/assets/styles/components/search.less
index 8a647f13..40354bf6 100644
--- a/resources/assets/styles/components/search.less
+++ b/resources/assets/styles/components/search.less
@@ -21,24 +21,47 @@
 @import '../variables';
 
 .search {
-  position: relative;
+  width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 10px;
 }
 
 input.search-input {
+  background: lighten(@pfm-logo-purple, 10%);
+  color: #fff;
+  border: 0;
   font-size: 13px;
-  padding: 15px 10px;
+  padding: 15px;
   margin-bottom: 0;
+  height: @pfm-top-bar-size - 20px;
+  border-radius: 2px;
+  .light-material-shadow(1);
+
+  &::-webkit-input-placeholder {
+    color: #fff;
+    opacity: 1;
+  }
+  &::-moz-input-placeholder {
+    color: #fff;
+    opacity: 1;
+  }
+  &:ms-input-placeholder {
+    color: #fff;
+    opacity: 1;
+  }
 }
 
 .search-results {
-  width: 600px;
-  padding: 10px;
-
+  width: 1200px;
+  padding: 5px 15px;
   background: #fff;
+  .material-shadow(3);
 
   .-column1, .-column2 {
     width: 48%;
     float: left;
+    margin-bottom: 10px;
   }
 
   .-column1 {
@@ -62,7 +85,7 @@ input.search-input {
   .-section-header {
     background: transparent;
     color: @pfm-purple;
-
+    margin-top: 10px;
     padding-left: 0;
   }
 
@@ -72,3 +95,23 @@ input.search-input {
     }
   }
 }
+
+@media only screen and (max-width: 1580px) {
+  .search {
+    width: 800px;
+  }
+
+  .search-results {
+    width: 800px;
+  }
+}
+
+@media only screen and (max-width: 1170px) {
+  .search {
+    width: 430px;
+  }
+
+  .search-results {
+    width: 430px;
+  }
+}
diff --git a/resources/assets/styles/content.less b/resources/assets/styles/content.less
index 0b461768..cd3e7bbb 100644
--- a/resources/assets/styles/content.less
+++ b/resources/assets/styles/content.less
@@ -166,7 +166,7 @@
           margin-bottom: 5px;
           display: table;
         }
-        
+
         > .follower-count {
           font-size: 14pt;
         }
@@ -549,12 +549,15 @@ html {
   margin-top: 15px;
   margin-right: 14px;
   font-size: 20pt;
+  position: absolute;
+  top: 0;
+  right: 60px;
 
   a {
-    color: #5A5A5A;
+    color: #fff;
 
     &:hover {
-      color: #000;
+      color: #eee;
     }
   }
 
@@ -613,7 +616,7 @@ html {
   right: -410px;
   width: 400px;
   height: ~"calc(100% - 64px)";
-  z-index: 1000;
+  z-index: 500;
   background: #eee;
   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/resources/assets/styles/layout.less b/resources/assets/styles/layout.less
index 1a4468e0..ffd26a2a 100644
--- a/resources/assets/styles/layout.less
+++ b/resources/assets/styles/layout.less
@@ -36,27 +36,26 @@ header {
 
   .user-details {
     float: right;
-    margin-right: 10px;
+    margin-right: 20px;
     margin-top: 9px;
+    position: absolute;
+    top: 0;
+    right: 0;
 
     .avatar {
-      .img-thumbnail();
-
       display: block;
       float: right;
-      padding: 2px;
       cursor: pointer;
       text-decoration: none;
+      border-radius: 22px;
+      box-shadow: 0 0 0 transparent;
+      transition: box-shadow 0.3s @swift-ease-out;
 
-      &:hover, &:focus {
-        background: #ddd;
-        color: darken(@pfm-purple, 20%);
+      &:hover {
+        .light-material-shadow(1);
       }
-
-      span {
-        font-weight: bold;
-        display: inline-block;
-        padding: 0px 3px;
+      &:focus {
+        .light-material-shadow(2);
       }
     }
 
@@ -65,18 +64,10 @@ header {
       right: 0px;
     }
 
-    .name {
-      float: left;
-      height: 44px;
-      line-height: 44px;
-      padding-right: 10px;
-      font-weight: bold;
-      font-size: 12pt;
-    }
-
     img {
-      height: 40px;
-      width: 40px;
+      height: 44px;
+      width: 44px;
+      border-radius: 22px;
     }
   }
 }
@@ -85,9 +76,12 @@ header {
   margin-left: @pfm-sidebar-size;
   height: 64px;
   background: #fff;
-  position: relative;
-  z-index: 500;
   border-bottom: 1px solid #bcbcbc;
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  z-index: 1010;
+  box-shadow: 0 0 8px rgba(0,0,0,0.5);
 }
 
 .sidebar {
@@ -97,7 +91,7 @@ header {
     width: (@pfm-sidebar-size);
     height: 64px;
     line-height: 42px;
-    background: #84528A;
+    background: @pfm-logo-purple;
     color: #fff;
     font-size: 24pt;
     font-weight: lighter;
@@ -107,7 +101,7 @@ header {
     position: relative;
 
     &:hover {
-      background: darken(#84528A, 25%);
+      background: darken(@pfm-logo-purple, 15%);
       color: #fff;
       text-decoration: none;
     }
@@ -130,6 +124,7 @@ header {
   position: absolute;
   bottom: 0;
   left: 0;
+  .material-shadow(3);
 
   li {
     margin: 0px;
@@ -242,15 +237,19 @@ header {
 }
 
 .site-content {
-  overflow: hidden;
-  margin-left: @pfm-sidebar-size;
-  background: #fff;
-  height: 100%;
-  z-index: 100;
+    overflow: hidden;
+    margin-left: @pfm-sidebar-size;
+    background: #fff;
+    height: 100%;
+    z-index: 100;
+}
+
+.site-body {
+    margin-top: @pfm-top-bar-size;
 }
 
 .file-over-notice {
-  display: none;
+    display: none;
 }
 
 .chart-container {
@@ -261,14 +260,25 @@ header {
     margin-bottom: 10px;
 }
 
-.mobile-header {
-  display: none;
-}
-
-.burger-wrapper {
-    top:20px;
-    left: 20px;
+.top-bar {
+    display: block;
     position: absolute;
+    z-index: 599;
+    background: @pfm-logo-purple;
+    height: @pfm-top-bar-size;
+    width: 100%;
+    top: 0;
+
+    .burger-wrapper {
+        top:20px;
+        left: 20px;
+        position: absolute;
+        display: none;
+    }
+
+    .logo {
+        display: none;
+    }
 }
 
 .burger {
diff --git a/resources/assets/styles/mixins.less b/resources/assets/styles/mixins.less
index 6141e0a1..e198a88f 100644
--- a/resources/assets/styles/mixins.less
+++ b/resources/assets/styles/mixins.less
@@ -119,3 +119,26 @@
   -moz-animation-name: @string;
   -webkit-animation-name: @string;
 }
+
+.material-shadow(@size) when (@size = 1) {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
+}
+.material-shadow(@size) when (@size = 2) {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
+}
+.material-shadow(@size) when (@size = 3) {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
+}
+.material-shadow(@size) when (@size = 4) {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);
+}
+.material-shadow(@size) when (@size = 5) {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, .30), 0 15px 12px rgba(0, 0, 0, .22);
+}
+
+.light-material-shadow(@size) when (@size = 1) {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
+}
+.light-material-shadow(@size) when (@size = 2) {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, .08), 0 3px 6px rgba(0, 0, 0, .12);
+}
diff --git a/resources/assets/styles/mobile.less b/resources/assets/styles/mobile.less
index ca4d31f6..74c0908e 100644
--- a/resources/assets/styles/mobile.less
+++ b/resources/assets/styles/mobile.less
@@ -19,34 +19,28 @@
 
   .site-body {
     overflow-x: hidden;
+    margin-top: 64px + 44px;
   }
 
   .now-playing {
-    margin-left: 0px;
-    position: fixed;
-    width: 100%;
-    bottom: 0;
-    z-index: 1010;
-    box-shadow: 0 0 8px rgba(0,0,0,0.5);
+    margin-left: 0;
   }
 
   .user-details {
     position: fixed;
     top: 0;
-    right: 0;
+    right: 0 !important;
     z-index: 1002;
-    margin-right: 10px;
+    margin-right: 10px !important;
     margin-top: 10px;
   }
 
-  .mobile-header {
-    display: block !important;
-    position: absolute;
-    z-index: 1001;
-    background: #84528A;
-    height: 64px;
-    width: 100%;
-    top: 0;
+  .top-bar {
+    margin-left: 0;
+
+    .burger-wrapper {
+      display: block;
+    }
 
     .logo {
       text-align: center;
@@ -65,7 +59,7 @@
   }
 
   .sidebar {
-    left: -170px;
+    left: -(@pfm-sidebar-size + 10);
     transform: translateX(0px) translateZ(0);
     perspective: 1000;
     backface-visibility: hidden;
@@ -94,22 +88,21 @@
     }
 
     &.active {
-      transform: translateX(170px) translateZ(0);
+      transform: translateX(@pfm-sidebar-size + 10) translateZ(0);
     }
   }
 
-  .user-details > .avatar {
-    border: 0 !important;
-    box-shadow: initial !important;
-    background: transparent !important;
+  .search {
+    width: 100%;
+    margin-top: 14px;
+  }
 
-    > img {
-      border-radius: 20px;
-    }
+  input.search-input {
+    border-radius: 0;
+  }
 
-    > span {
-      display: none !important;
-    }
+  .search-results {
+    width: 100%;
   }
 
   .track-player {
@@ -145,10 +138,6 @@
     }
   }
 
-  input.search-input {
-    border: 0;
-  }
-
   .dropdowns {
     margin-bottom: 0px;
     > li {
@@ -299,9 +288,9 @@
   .notification-menu {
     position: fixed;
     top: 0;
-    right: 54px;
+    right: 54px !important;
     margin-top: 13px;
-    margin-right: 10px;
+    margin-right: 10px !important;
 
     a, a:active, a:hover, a:focus {
       color: #fff;
@@ -405,7 +394,7 @@
     margin-top: 13px;
   }
 
-  .mobile-header .logo {
+  .top-bar .logo {
     margin-left: 55px;
     height: 52px;
     width: 122px;
@@ -417,4 +406,4 @@
   .x-attribution {
     position: static !important;
   }
-}
\ No newline at end of file
+}
diff --git a/resources/assets/styles/variables.less b/resources/assets/styles/variables.less
index b13373f4..7e23416d 100644
--- a/resources/assets/styles/variables.less
+++ b/resources/assets/styles/variables.less
@@ -20,4 +20,11 @@
 @pfm-dark-grey: #646464;
 @pfm-light-grey: #969696;
 @pfm-light-purple: #dac5db;
-@pfm-sidebar-size: 160px;
+@pfm-logo-purple: #84528A;
+@pfm-sidebar-size: 180px;
+@pfm-top-bar-size: 64px;
+
+// Material animation timings
+@swift-ease-out: cubic-bezier(0.25, 0.8, 0.25, 1);
+@swift-ease-in: cubic-bezier(0.55, 0, 0.55, 0.2);
+@swift-ease-in-out: cubic-bezier(0.35, 0, 0.25, 1);
diff --git a/resources/views/shared/_app_layout.blade.php b/resources/views/shared/_app_layout.blade.php
index c0ac1429..ab100808 100644
--- a/resources/views/shared/_app_layout.blade.php
+++ b/resources/views/shared/_app_layout.blade.php
@@ -42,22 +42,20 @@
     </script>
 
     <header>
-        <div class="mobile-header">
-          <div class="burger-wrapper" ng-click="menuToggle()">
-            <div class="burger">
-              <div class="bun-top"></div>
-              <div class="meat"></div>
-              <div class="bun-bottom"></div>
+        <div class="top-bar">
+            <div class="burger-wrapper" ng-click="menuToggle()">
+                <div class="burger">
+                    <div class="bun-top"></div>
+                    <div class="meat"></div>
+                    <div class="bun-bottom"></div>
+                </div>
             </div>
-          </div>
-          <a href="/" class="logo"><img class="default-logo" src="/images/ponyfm-logo-white.svg"><img class="small-logo" src="/images/ponyfm-logo-white-nodisc.svg"></a>
-        </div>
-        <div class="now-playing">
+            <a href="/" class="logo"><img class="default-logo" src="/images/ponyfm-logo-white.svg"><img class="small-logo" src="/images/ponyfm-logo-white-nodisc.svg"></a>
+            <pfm-search></pfm-search>
             @if (Auth::check())
                 <div class="user-details dropdown">
                     <a class="avatar dropdown-toggle" bs-dropdown href="#">
                         <img src="{{Auth::user()->getAvatarUrl(\Poniverse\Ponyfm\Models\Image::THUMBNAIL)}}" />
-                        <span><i class="fa fa-chevron-down"></i></span>
                     </a>
                     <ul class="dropdown-menu">
                         <li ui-sref-active="active"><a ui-sref="content.artist.profile({slug: auth.user.slug})">Your Profile</a></li>
@@ -71,6 +69,8 @@
                     <div class="counter" ng-class="{'show': nCount > 0}">@{{ nCountFormatted }}</div>
                 </div>
             @endif
+        </div>
+        <div class="now-playing">
             <pfm-player></pfm-player>
         </div>
     </header>
@@ -80,7 +80,6 @@
             <a href="/">
               <img src="/images/ponyfm-logo-white.svg" class="logo">
             </a>
-            <li><pfm-search class="hidden-xs"></pfm-search></li>
             <li ng-class="{selected: stateIncludes('content.tracks') || stateIncludes('content.track')}"><a ui-sref="content.tracks.list">Tracks</a></li>
             <li ng-class="{selected: stateIncludes('content.albums') || stateIncludes('content.album')}"><a ui-sref="content.albums.list">Albums</a></li>
             <li ng-class="{selected: stateIncludes('content.playlists') || stateIncludes('content.playlist')}"><a ui-sref="content.playlists.list">Playlists</a></li>