diff --git a/src/js/App.js b/src/js/App.js
index bf25aedc..59da5660 100755
--- a/src/js/App.js
+++ b/src/js/App.js
@@ -7,7 +7,6 @@ import { connect } from 'react-redux'
 
 import Sidebar from './components/Sidebar'
 import PlaybackControls from './components/PlaybackControls'
-import SidebarToggleButton from './components/SidebarToggleButton'
 import ContextMenu from './components/ContextMenu'
 import Dragger from './components/Dragger'
 import Modal from './components/Modal/Modal'
diff --git a/src/js/components/Header.js b/src/js/components/Header.js
index e35a8ebc..3896dbd5 100755
--- a/src/js/components/Header.js
+++ b/src/js/components/Header.js
@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import FontAwesome from 'react-fontawesome'
 
 import Icon from './Icon'
-import SidebarToggleButton from './SidebarToggleButton'
 import ContextMenuTrigger from './ContextMenuTrigger'
 
 export default class Header extends React.Component{
@@ -33,12 +32,24 @@ export default class Header extends React.Component{
 		}
 	}
 
+	renderContextMenuTrigger(){
+
+		// No custom trigger, nor any options
+		if (!this.props.handleContextMenuTrigger && !this.props.options){
+			return null;
+		}
+
+		return <ContextMenuTrigger onTrigger={e => this.handleContextMenuTrigger(e,this.props.options)} />
+	}
+
 	renderOptions(){
-		if (!this.props.options && !this.props.handleContextMenuTrigger) return null
+		if (!this.props.options && !this.props.handleContextMenuTrigger){
+			return null;
+		}
 
 		return (
 			<div className='options'>
-				<ContextMenuTrigger onTrigger={e => this.handleContextMenuTrigger(e,this.props.options)} />
+				{this.renderContextMenuTrigger()}
 				<span className="items">
 					<span className="liner">
 						{this.props.options ? this.props.options : null}
@@ -52,7 +63,6 @@ export default class Header extends React.Component{
 		return (
 			<header className={(this.props.className ? this.props.className : null)}>
 				{this.props.icon ? <Icon name={this.props.icon} /> : null}
-				<SidebarToggleButton />
 				{this.props.title ? <h1>{ this.props.title }</h1> : null}
 				{this.renderOptions()}
 			</header>
diff --git a/src/js/components/PlaybackControls.js b/src/js/components/PlaybackControls.js
index 7815e204..a33ac430 100755
--- a/src/js/components/PlaybackControls.js
+++ b/src/js/components/PlaybackControls.js
@@ -97,9 +97,9 @@ class PlaybackControls extends React.Component{
 				</section>
 
 				<section className="settings">
-					{ this.renderConsumeButton() }
-					{ this.renderRandomButton() }
-					{ this.renderRepeatButton() }
+					{this.renderConsumeButton()}
+					{this.renderRandomButton()}
+					{this.renderRepeatButton()}
 				</section>
 
 				<section className="progress">
@@ -113,9 +113,12 @@ class PlaybackControls extends React.Component{
 				</section>
 
 				<section className="triggers">
-					<a className="control next" onClick={() => this.setState({expanded: !this.state.expanded})}>
+					<a className="control expanded-controls" onClick={() => this.setState({expanded: !this.state.expanded})}>
 						{this.state.expanded ? <FontAwesome name="chevron-down" /> : <FontAwesome name="chevron-up" />}
 					</a>
+					<a className={"control sidebar-toggle"+(this.props.sidebar_open ? ' open' : '')} onClick={() => this.props.uiActions.toggleSidebar()}>
+						<FontAwesome className="open" name="bars" />
+					</a>
 				</section>
 				
 			</div>
@@ -138,7 +141,8 @@ const mapStateToProps = (state, ownProps) => {
 		time_position: state.mopidy.time_position,
 		consume: state.mopidy.consume,
 		repeat: state.mopidy.repeat,
-		random: state.mopidy.random
+		random: state.mopidy.random,
+		sidebar_open: state.ui.sidebar_open
 	}
 }
 
diff --git a/src/js/components/Sidebar.js b/src/js/components/Sidebar.js
index 56cfc147..a03df7d2 100755
--- a/src/js/components/Sidebar.js
+++ b/src/js/components/Sidebar.js
@@ -9,6 +9,7 @@ import Dropzones from './Dropzones'
 import Thumbnail from './Thumbnail'
 
 import FontAwesome from 'react-fontawesome'
+import * as uiActions from '../services/ui/actions'
 import * as mopidyActions from '../services/mopidy/actions'
 
 class Sidebar extends React.Component{
@@ -100,6 +101,10 @@ class Sidebar extends React.Component{
 
 		       	<Dropzones />
 
+		       	<div className="close" onClick={e => this.props.uiActions.toggleSidebar(false)}>
+		       		<FontAwesome name="chevron-right" />
+		       	</div>
+
 			</aside>
 		);
 	}
@@ -126,6 +131,7 @@ const mapStateToProps = (state, ownProps) => {
 
 const mapDispatchToProps = (dispatch) => {
 	return {
+		uiActions: bindActionCreators(uiActions, dispatch),
 		mopidyActions: bindActionCreators(mopidyActions, dispatch)
 	}
 }
diff --git a/src/js/components/SidebarToggleButton.js b/src/js/components/SidebarToggleButton.js
deleted file mode 100755
index 8a668e40..00000000
--- a/src/js/components/SidebarToggleButton.js
+++ /dev/null
@@ -1,46 +0,0 @@
-
-import React, { PropTypes } from 'react'
-import { connect } from 'react-redux'
-import { bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
-
-import * as uiActions from '../services/ui/actions'
-
-class SidebarToggleButton extends React.Component{
-
-	constructor(props){
-		super(props);
-	}
-
-	handleClick(e){
-		this.props.uiActions.toggleSidebar()
-	} 
-
-	render(){
-
-		var classname = 'sidebar-toggle'
-		if (this.props.open ) classname += ' open'
-		if (this.props.className ) classname += ' '+this.props.className
-
-		return (
-			<div className={classname} onClick={ () => this.handleClick() }>
-				<FontAwesome className="open" name="bars" /> 
-				<FontAwesome className="close" name="chevron-left" />
-			</div>
-		);
-	}
-}
-
-const mapStateToProps = (state, ownProps) => {
-	return {
-		open: state.ui.sidebar_open
-	}
-}
-
-const mapDispatchToProps = (dispatch) => {
-	return {
-		uiActions: bindActionCreators(uiActions, dispatch)
-	}
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(SidebarToggleButton)
\ No newline at end of file
diff --git a/src/js/services/ui/actions.js b/src/js/services/ui/actions.js
index bd885b7a..7c963240 100755
--- a/src/js/services/ui/actions.js
+++ b/src/js/services/ui/actions.js
@@ -54,8 +54,12 @@ export function lazyLoading(start){
 }
 
 export function toggleSidebar(new_state = 'toggle'){
-    var action = { type: 'TOGGLE_SIDEBAR' }
-    if (new_state != 'toggle' ) action.new_state = new_state
+    var action = {
+        type: 'TOGGLE_SIDEBAR'
+    }
+    if (new_state != 'toggle'){
+        action.new_state = new_state
+    }
     return action
 }
 
diff --git a/src/js/views/Album.js b/src/js/views/Album.js
index 62de1321..dc8bdaac 100755
--- a/src/js/views/Album.js
+++ b/src/js/views/Album.js
@@ -121,9 +121,6 @@ class Album extends React.Component{
 
 		return (
 			<div className="view album-view content-wrapper">
-
-				{this.props.slim_mode ? <Header icon="cd" title="Album" handleContextMenuTrigger={e => this.handleContextMenu(e)} uiActions={this.props.uiActions} /> : null}
-
 				<div className="thumbnail-wrapper">
 					<Thumbnail size="large" canZoom images={ this.props.album.images } />
 				</div>
@@ -146,7 +143,7 @@ class Album extends React.Component{
 				<div className="actions">
 					<button className="primary" onClick={e => this.play()}>Play</button>
 					{ helpers.uriSource(this.props.params.uri) == 'spotify' ? <FollowButton className="secondary" uri={this.props.params.uri} addText="Add to library" removeText="Remove from library" is_following={this.inLibrary()} /> : null }
-					{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
+					<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
 				</div>
 
 				<section className="list-wrapper">
diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js
index c794b7c4..26dd42be 100755
--- a/src/js/views/Artist.js
+++ b/src/js/views/Artist.js
@@ -14,7 +14,6 @@ import Parallax from '../components/Parallax'
 import ArtistGrid from '../components/ArtistGrid'
 import RelatedArtists from '../components/RelatedArtists'
 import FollowButton from '../components/FollowButton'
-import SidebarToggleButton from '../components/SidebarToggleButton'
 import ContextMenuTrigger from '../components/ContextMenuTrigger'
 
 import * as helpers from '../helpers'
@@ -206,9 +205,6 @@ class Artist extends React.Component{
 
 			return (
 				<div className="view artist-view">
-
-					{this.props.slim_mode ? <Header className="overlay" icon="mic" title="Artist" handleContextMenuTrigger={e => this.handleContextMenu(e)} uiActions={this.props.uiActions} /> : null}
-
 					<div className="intro">
 
 						<Parallax image={image} />
@@ -218,7 +214,7 @@ class Artist extends React.Component{
 							<div className="actions">
 								<button className="primary" onClick={e => this.props.mopidyActions.playURIs(uris_to_play, this.props.artist.uri)}>Play</button>
 								{is_spotify ? <FollowButton className="white" uri={this.props.params.uri} removeText="Remove from library" addText="Add to library" is_following={this.inLibrary()} /> : null}
-								{this.props.slim_mode ? null : <ContextMenuTrigger className="white" onTrigger={e => this.handleContextMenu(e)} />}
+								<ContextMenuTrigger className="white" onTrigger={e => this.handleContextMenu(e)} />
 							</div>
 							{ this.renderSubViewMenu() }
 						</div>
@@ -232,7 +228,6 @@ class Artist extends React.Component{
 		} else {
 			return (
 				<div className="view artist-view">
-					<SidebarToggleButton />
 					<div className="intro">
 						<Parallax />
 						<div className="liner">
diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js
index dcf48553..a38b1d82 100755
--- a/src/js/views/Playlist.js
+++ b/src/js/views/Playlist.js
@@ -117,7 +117,7 @@ class Playlist extends React.Component{
 					<div className="actions">
 						<button className="primary" onClick={ e => this.play() }>Play</button>
 						<button className="secondary" onClick={ e => this.props.uiActions.openModal('edit_playlist', { uri: this.props.params.uri, name: this.props.playlist.name }) }>Edit</button>
-						{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
+						<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
 					</div>
 				)
 
@@ -127,7 +127,7 @@ class Playlist extends React.Component{
 						<div className="actions">
 							<button className="primary" onClick={ e => this.play() }>Play</button>
 							<button className="secondary" onClick={ e => this.props.uiActions.openModal('edit_playlist', { uri: this.props.params.uri, name: this.props.playlist.name, public: this.props.playlist.public, collaborative: this.props.playlist.collaborative, description: this.props.playlist.description }) }>Edit</button>
-							{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
+							<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
 						</div>
 					)
 				}
@@ -135,7 +135,7 @@ class Playlist extends React.Component{
 					<div className="actions">
 						<button className="primary" onClick={ e => this.play() }>Play</button>
 						<FollowButton className="secondary" uri={this.props.params.uri} addText="Add to library" removeText="Remove from library" is_following={this.inLibrary()} />
-						{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
+						<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
 					</div>
 				)
 
@@ -143,7 +143,7 @@ class Playlist extends React.Component{
 				return (
 					<div className="actions">
 						<button className="primary" onClick={ e => this.play() }>Play</button>
-						{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
+						<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
 					</div>
 				)
 		}
@@ -168,9 +168,6 @@ class Playlist extends React.Component{
 
 		return (
 			<div className="view playlist-view content-wrapper">
-
-				{this.props.slim_mode ? <Header icon="playlist" title="Playlist" handleContextMenuTrigger={e => this.handleContextMenu(e)} uiActions={this.props.uiActions} /> : null}
-
 				<div className="thumbnail-wrapper">
 					<Thumbnail size="large" canZoom images={ this.props.playlist.images } />
 				</div>
diff --git a/src/js/views/Queue.js b/src/js/views/Queue.js
index 3b000ef7..61ded5de 100755
--- a/src/js/views/Queue.js
+++ b/src/js/views/Queue.js
@@ -9,7 +9,6 @@ import Parallax from '../components/Parallax'
 import TrackList from '../components/TrackList'
 import Track from '../components/Track'
 import Dater from '../components/Dater'
-import SidebarToggleButton from '../components/SidebarToggleButton'
 import FullPlayer from '../components/FullPlayer'
 import ArtistSentence from '../components/ArtistSentence'
 import Thumbnail from '../components/Thumbnail'
@@ -111,9 +110,7 @@ class Queue extends React.Component{
 		return (
 			<div className="view queue-view">			
 				<Header icon="play" className="overlay" title="Now playing" options={options} uiActions={this.props.uiActions} />
-
 				<Parallax blur image={image} />
-
 				<div className="content-wrapper">
 				
 					<div className="current-track">
diff --git a/src/js/views/QueueHistory.js b/src/js/views/QueueHistory.js
index 6433e002..756cc85d 100755
--- a/src/js/views/QueueHistory.js
+++ b/src/js/views/QueueHistory.js
@@ -6,7 +6,6 @@ import { bindActionCreators } from 'redux'
 import FontAwesome from 'react-fontawesome'
 
 import TrackList from '../components/TrackList'
-import SidebarToggleButton from '../components/SidebarToggleButton'
 import Header from '../components/Header'
 
 import * as uiActions from '../services/ui/actions'
@@ -49,7 +48,6 @@ class QueueHistory extends React.Component{
 		return (
 			<div className="view queue-history-view">
 				<Header icon="play" title="Playback history" options={options} uiActions={this.props.uiActions} />
-
 				<section className="content-wrapper">
 					<TrackList
 						className="queue-history-track-list"
diff --git a/src/js/views/User.js b/src/js/views/User.js
index 361d08f4..72fa1ea5 100755
--- a/src/js/views/User.js
+++ b/src/js/views/User.js
@@ -8,7 +8,6 @@ import Thumbnail from '../components/Thumbnail'
 import PlaylistGrid from '../components/PlaylistGrid'
 import FollowButton from '../components/FollowButton'
 import LazyLoadListener from '../components/LazyLoadListener'
-import SidebarToggleButton from '../components/SidebarToggleButton'
 import Parallax from '../components/Parallax'
 import ContextMenuTrigger from '../components/ContextMenuTrigger'
 
@@ -82,9 +81,6 @@ class User extends React.Component{
 
 		return (
 			<div className="view user-view">
-
-				<SidebarToggleButton />
-
 				<div className="intro">
 					<Parallax image={image} />
 					<div className="liner">
diff --git a/src/js/views/discover/DiscoverRecommendations.js b/src/js/views/discover/DiscoverRecommendations.js
index 7b351d0d..05ee2ddd 100755
--- a/src/js/views/discover/DiscoverRecommendations.js
+++ b/src/js/views/discover/DiscoverRecommendations.js
@@ -11,7 +11,6 @@ import AlbumGrid from '../../components/AlbumGrid'
 import TrackList from '../../components/TrackList'
 import Parallax from '../../components/Parallax'
 import AddSeedField from '../../components/AddSeedField'
-import SidebarToggleButton from '../../components/SidebarToggleButton'
 import * as helpers from '../../helpers'
 import * as spotifyActions from '../../services/spotify/actions'
 
@@ -226,9 +225,6 @@ class Discover extends React.Component{
 	render(){
 		return (
 			<div className="view discover-view">
-			
-				<SidebarToggleButton />
-
 				<div className="intro">
 
 					<Parallax image="/iris/assets/backgrounds/discover.jpg" />
diff --git a/src/scss/app.scss b/src/scss/app.scss
index b9706a71..cef1e4ab 100755
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -15,7 +15,6 @@
 @import 'components/slider';
 @import 'components/playback-controls';
 @import 'components/sidebar';
-@import 'components/sidebar-toggle-button';
 @import 'components/lists';
 @import 'components/grid';
 @import 'components/grid-slider';
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
index f2371379..3505da3e 100755
--- a/src/scss/components/_header.scss
+++ b/src/scss/components/_header.scss
@@ -57,15 +57,18 @@ main {
 			top: 0;
 			left: 0;
 			width: 100%;
-			z-index: 99;
+			z-index: 98;
 		}
 
 		@include responsive($bp_medium){
 			padding: 10px 10px 10px 0;
-			margin-bottom: -20px;
+			margin-bottom: -10px;
 
 			.icon {
-				visibility: hidden;
+				height: 1.2rem;
+				margin-bottom: 5px;
+				padding-right: 10px;
+				margin-left: 10px;
 			}
 
 			h1 {
diff --git a/src/scss/components/_playback-controls.scss b/src/scss/components/_playback-controls.scss
index 3f662560..3efa3bd9 100755
--- a/src/scss/components/_playback-controls.scss
+++ b/src/scss/components/_playback-controls.scss
@@ -86,7 +86,7 @@
 		font-size: 12px;
 		color: $white;
 		cursor: pointer;
-		padding: 8px 6px;
+		padding: 10px 8px;
 		display: inline-block;
 		vertical-align: bottom;
 		opacity: 0.8;
@@ -117,11 +117,11 @@
 
 	section {
 		position: absolute;
-		bottom: 11px;
+		bottom: 8px;
 
 		&.playback {
-			left: 20px;
-			width: 120px;
+			left: 10px;
+			width: 125px;
 			text-align: center;
 		}
 
@@ -257,6 +257,22 @@
 			&.triggers {
 				display: block;
 				right: 10px;
+
+				.sidebar-toggle.open {
+					opacity: 1 !important;
+
+					&:after {
+						background: rgba(0,0,0,0.8);
+						content: '';
+						display: block;
+						position: fixed;
+						top: 0;
+						left: 0;
+						bottom: 0;
+						right: 0;
+						z-index: 99;
+					}
+				}
 			}
 		}
 
diff --git a/src/scss/components/_sidebar-toggle-button.scss b/src/scss/components/_sidebar-toggle-button.scss
deleted file mode 100755
index f43f91d1..00000000
--- a/src/scss/components/_sidebar-toggle-button.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-
-
-.sidebar-toggle {
-	@include animate(0.15s);
-	position: absolute;
-	top: 0;
-	left: 0;
-	padding: 18px;
-	z-index: 98;
-	color: $white;
-	font-size: 18px;
-	cursor: pointer;
-	display: none;
-
-	@include responsive($bp_medium){
-		display: block;
-	}
-
-	&.open {
-		position: fixed;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		background: $overlay_dark;
-		color: $white;
-		z-index: 99;
-
-		-ms-transform: translate(220px, 0);
-		-webkit-transform: translate(220px, 0);
-		transform: translate(220px, 0);
-
-		.open {
-			display: none;
-		}
-	}
-
-	&:not(.open){
-		.close {
-			display: none;
-		}
-	}
-}
\ No newline at end of file
diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss
index 5dacdd0c..b2113ef7 100755
--- a/src/scss/components/_sidebar.scss
+++ b/src/scss/components/_sidebar.scss
@@ -99,26 +99,43 @@ aside{
 		}
 	}
 
+	.close {
+		display: none;
+		position: absolute;
+		bottom: 10px;
+		right: 10px;
+		padding: 10px 8px;
+		display: inline-block;
+		opacity: 0.5;
+		z-index: 99;
+	}
+
 	@include responsive($bp_medium){
 		@include animate(0.15s);
 		width: 220px;
-		left: -220px;
+		left: auto;
+		right: -220px;
 		padding-bottom: 0;
 		position: fixed;
 		z-index: 100;
 
 		.sidebar-open & {
-			-ms-transform: translate(220px, 0);
-			-webkit-transform: translate(220px, 0);
-			transform: translate(220px, 0);
+			-ms-transform: translate(-220px, 0);
+			-webkit-transform: translate(-220px, 0);
+			transform: translate(-220px, 0);
 		}
 
 		.liner {
 			bottom: 0 !important;
+			padding-bottom: 30px;
 		}
 
 		.thumbnail {
 			display: none;
 		}
+
+		.close {
+			display: block;
+		}
 	}
 }
\ No newline at end of file