diff --git a/src/index.html b/src/index.html
index 17ccb80d..d5504dc1 100755
--- a/src/index.html
+++ b/src/index.html
@@ -14,7 +14,7 @@
 	<link rel="shortcut icon" type="image/x-icon" href="/iris/assets/favicon.ico" />
 	<link rel="shortcut-icon" href="/iris/assets/favicon.ico" />
 
-	<link href="//fonts.googleapis.com/css?family=Archivo+Narrow:400,700|Lato:400,400i,700|Overpass:400,400i,600|Montserrat:400|500|600|News+Cycle:400,700|PT+Sans+Narrow:400,700" rel="stylesheet">
+	<link href="//fonts.googleapis.com/css?family=Archivo+Narrow:400,700|Lato:400,400i,700|Overpass:400,400i,600,700,800|Montserrat:400|500|600|News+Cycle:400,700|PT+Sans+Narrow:400,700" rel="stylesheet">
 	<link href="/iris/app.css" rel="stylesheet" />
 
 	<link rel="manifest" href="/iris/assets/manifest.json">
diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss
index bdba1d18..a877619a 100755
--- a/src/scss/components/_context-menu.scss
+++ b/src/scss/components/_context-menu.scss
@@ -262,14 +262,39 @@
 }
 
 .context-menu-trigger {
-	padding: 8px 12px;
+	display: inline-block;
+	padding: 9px 10px 7px;
 	font-size: 18px;
 	cursor: pointer;
-	vertical-align: middle;
+	vertical-align: top;
 	margin-left: 10px;
+	position: relative;
+	border-radius: 3px;
 
-	&:hover {
-		color: $turquoise;
+	&:before {
+		@include animate();
+		content: '';
+		display: block;
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		opacity: 0;
+		z-index: 9;
+		background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
+		background: -moz-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
+		background: -o-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
+		background: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
+	}
+
+	&:hover{
+		cursor: pointer;
+		box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
+
+		&:before {
+			opacity: 0.15;
+		}
 	}
 }
 
diff --git a/src/scss/components/_dropdown-field.scss b/src/scss/components/_dropdown-field.scss
index 3fc12c20..31914157 100755
--- a/src/scss/components/_dropdown-field.scss
+++ b/src/scss/components/_dropdown-field.scss
@@ -21,7 +21,7 @@
 	}
 
 	.options {
-		color: $grey;
+		color: $black;
 		position: absolute;
 		top: 46px;
 		right: 10px;
@@ -42,7 +42,7 @@
 			height: 0;
 			border-left: 5px solid transparent;
 			border-right: 5px solid transparent;
-			border-bottom: 6px solid $light_grey;
+			border-bottom: 6px solid $mid_grey;
 		}
 
 		.option {
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
index 32acb413..b1a7d3ed 100755
--- a/src/scss/components/_header.scss
+++ b/src/scss/components/_header.scss
@@ -29,20 +29,15 @@ main {
 
 			.button,
 			button {
+				font-size: 13px;
+				font-weight: 600;
+				font-family: "Overpass";
 				background: transparent;
 				text-transform: none;
 				padding: 13px 10px;
 				margin: 0;
 				min-width: 0;
-				border: 0;
 				color: $black;
-				font-size: 13px;
-				font-weight: 600;
-				font-family: "Overpass";
-
-				&:active {
-					color: $blue;
-				}
 			}
 		}
 
diff --git a/src/scss/components/_notifications.scss b/src/scss/components/_notifications.scss
index c2528da4..2d502e20 100755
--- a/src/scss/components/_notifications.scss
+++ b/src/scss/components/_notifications.scss
@@ -2,7 +2,7 @@
 
 .notifications {
 	position: fixed;
-	bottom: 55px;
+	bottom: 65px;
 	right: 15px;
 	z-index: 97;
 	pointer-events: none;
diff --git a/src/scss/components/_playback-controls.scss b/src/scss/components/_playback-controls.scss
index e6115784..2ae5997e 100755
--- a/src/scss/components/_playback-controls.scss
+++ b/src/scss/components/_playback-controls.scss
@@ -5,16 +5,20 @@
 	bottom: 0;
 	right: 0;
 	left: 0;
-	height: 40px;
-	background: $faint_grey;
+	height: 50px;
+	background: $light_grey;
 	color: $black;
-	border-top: 1px solid $light_grey;
+
+	background: -webkit-linear-gradient(to bottom left, $faint_grey, $light_grey);
+	background: -moz-linear-gradient(to bottom left, $faint_grey, $light_grey);
+	background: -o-linear-gradient(to bottom left, $faint_grey, $light_grey);
+	background: linear-gradient(to bottom left, $faint_grey, $light_grey);
 
 	.current-track {
 		@include animate();
 		cursor: pointer;
 		position: absolute;
-		bottom: 41px;
+		bottom: 50px;
 		width: 220px;
 		font-size: 14px;
 		color: $black;
@@ -43,14 +47,14 @@
 		}
 
 		&:hover {
-			background: $light_grey;
+			background: darken($light_grey, 5%);
 		}
 	}
 
 	.control {
 		@include animate();
 		font-size: 12px;
-		color: $mid_grey;
+		color: $dark_grey;
 		cursor: pointer;
 		padding: 8px;
 		display: inline-block;
@@ -66,13 +70,13 @@
 		}
 
 		&:hover {
-			color: $dark_grey;
+			color: $black;
 		}
 	}
 
 	section {
 		position: absolute;
-		top: 6px;
+		top: 11px;
 
 		&.playback {
 			left: 20px;
@@ -81,7 +85,7 @@
 		}
 
 		&.progress {
-			top: 7px;
+			top: 12px;
 			left: 140px;
 			right: 280px;
 			padding-left: 20px;
@@ -120,7 +124,7 @@
 		}
 
 		&.volume {
-			top: 7px;
+			top: 12px;
 			right: 20px;
 			width: 150px;
 
diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss
index 56be17d7..79730b6a 100755
--- a/src/scss/components/_sidebar.scss
+++ b/src/scss/components/_sidebar.scss
@@ -69,16 +69,16 @@ aside{
 		z-index: 2;
 		position: relative;
 		padding-top: 8px;
-		font-family: "Overpass";
 
 		a {
-			font-size: 15px;
+			@include animate();
+			@include feature_font();
+			font-weight: 800;
+			font-size: 16px;
 			color: $black;
 			text-decoration: none;
 			display: block;
-			padding: 4px 18px 4px 14px;
-			border-left: 4px solid transparent;
-			font-weight: 600;
+			padding: 6px 25px;
 
 			.icon {
 				height: 14px;
@@ -102,16 +102,16 @@ aside{
 			}
 
 			&:hover:not([disabled]) {
-				opacity: 0.75;
+				opacity: 0.65;
 			}
 		}
 
 		section {
-			padding: 10px 0;
+			padding: 15px 0;
 
 			title {
 				display: block;
-				padding: 0 18px 2px 14px;
+				padding: 0 26px 5px 26px;
 				font-size: 10px;
 				text-transform: uppercase;
 				opacity: 0.5;
diff --git a/src/scss/components/_slider.scss b/src/scss/components/_slider.scss
index de6a9bcd..e0ba151e 100755
--- a/src/scss/components/_slider.scss
+++ b/src/scss/components/_slider.scss
@@ -5,7 +5,7 @@
 
 	.track {
 		position: absolute;
-		background: $light_grey;
+		background: darken($light_grey, 5%);
 		border-radius: 2px;
 
 		.progress {
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss
index 9fd00d6e..5fef261e 100755
--- a/src/scss/global/_core.scss
+++ b/src/scss/global/_core.scss
@@ -84,15 +84,15 @@ main {
 }
 
 h1 {
+	@include feature_font();
 	font-weight: 700;
 	font-size: 2.8rem;
-	font-family: "Overpass";
 }
 
 h2 {
+	@include feature_font();
 	font-size: 2rem;
 	font-weight: 700;
-	font-family: "Overpass";
 }
 
 h3 {
diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss
index 297918e0..231c07d8 100755
--- a/src/scss/global/_forms.scss
+++ b/src/scss/global/_forms.scss
@@ -44,15 +44,14 @@ button,
 input[type="button"],
 input[type="submit"] {
 	@include animate();
+	@include feature_font();
 	display: inline-block;
-	padding: 9px 20px 7px;
+	padding: 9px 30px 7px;
 	margin: 0 20px 10px 0;
 	color: $white;
 	background: $dark_grey;
 	font-size: 14px;
-	font-weight: 700;
 	box-sizing: border-box;
-	font-family: "Overpass";
 	border-radius: 3px;
 	vertical-align: middle;
 	position: relative;
diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss
index 8f9ba287..5bc33e20 100755
--- a/src/scss/global/_variables.scss
+++ b/src/scss/global/_variables.scss
@@ -178,3 +178,9 @@ $bp_shallow: 650px;
 		}
 	}
 }
+
+@mixin feature_font(){
+	font-family: "Overpass";
+	letter-spacing: -0.04em;
+	font-weight: 600;
+}
diff --git a/src/scss/views/_album.scss b/src/scss/views/_album.scss
index f8db2e9b..b18d1dd3 100755
--- a/src/scss/views/_album.scss
+++ b/src/scss/views/_album.scss
@@ -1,7 +1,9 @@
 
-.album-view {
+main .album-view {
+	padding-left: 400px;
+
 	.title {
-		padding: 0 40px 30px;
+		padding-bottom: 30px;
 
 		h3 {
 			color: $mid_grey;
@@ -17,7 +19,7 @@
 	}
 
 	.actions {
-		@include clearfix();
+		padding-bottom: 30px;
 	}
 
 	.description {
@@ -25,9 +27,10 @@
 	}
 
 	.thumbnail {
-		float: left;
-		max-width: 200px;
-		margin: 0 30px 30px 0;
+		position: absolute;
+		max-width: 320px;
+		top: 40px;
+		left: 40px;
 	}
 
 	@include responsive( $bp_medium ){
diff --git a/src/scss/views/_discover.scss b/src/scss/views/_discover.scss
index ae5f8c0f..9c3c39b3 100755
--- a/src/scss/views/_discover.scss
+++ b/src/scss/views/_discover.scss
@@ -109,7 +109,7 @@
 .discover-new-releases-view {
 	.intro {
 		position: relative;
-		padding-top: 120px;
+		padding-top: 80px;
 
 		.parallax {
 			position: absolute;
diff --git a/src/scss/views/_playlist.scss b/src/scss/views/_playlist.scss
index 7bb13394..a8035da0 100755
--- a/src/scss/views/_playlist.scss
+++ b/src/scss/views/_playlist.scss
@@ -1,8 +1,9 @@
 
-.playlist-view {
+main .playlist-view {
+	padding-left: 400px;
 
 	.title {
-		padding: 0 40px 30px;
+		padding-bottom: 30px;
 
 		h3 {
 			color: $mid_grey;
@@ -18,7 +19,7 @@
 	}
 
 	.actions {
-		@include clearfix();
+		padding-bottom: 30px;
 	}
 
 	.description {
@@ -26,9 +27,10 @@
 	}
 
 	.thumbnail {
-		float: left;
-		max-width: 200px;
-		margin: 0 30px 30px 0;
+		position: absolute;
+		max-width: 320px;
+		top: 40px;
+		left: 40px;
 	}
 
 	@include responsive( $bp_medium ){