diff --git a/src/js/components/AlbumGrid.js b/src/js/components/AlbumGrid.js
index 2ba56fbe..cb4a69e1 100755
--- a/src/js/components/AlbumGrid.js
+++ b/src/js/components/AlbumGrid.js
@@ -10,8 +10,10 @@ export default class AlbumGrid extends React.Component{
 
 	render(){
 		if( this.props.albums ){
+			var className = "grid album-grid"
+			if( this.props.className ) className += ' '+this.props.className
 			return (
-				<ul className="grid album-grid">
+				<div className={className}>
 					{
 						this.props.albums.map(
 							(album, index) => {
@@ -21,7 +23,7 @@ export default class AlbumGrid extends React.Component{
 							}
 						)
 					}
-				</ul>
+				</div>
 			);
 		}
 		return null;
diff --git a/src/js/components/ArtistGrid.js b/src/js/components/ArtistGrid.js
index 8c64e0d6..e9f3aaed 100755
--- a/src/js/components/ArtistGrid.js
+++ b/src/js/components/ArtistGrid.js
@@ -10,8 +10,10 @@ export default class ArtistGrid extends React.Component{
 
 	render(){
 		if( this.props.artists ){
+			var className = "grid artist-grid"
+			if( this.props.className ) className += ' '+this.props.className
 			return (
-				<ul className="grid artist-grid">
+				<div className={className}>
 					{
 						this.props.artists.map(
 							(artist, index) => {
@@ -20,7 +22,7 @@ export default class ArtistGrid extends React.Component{
 							}
 						)
 					}
-				</ul>
+				</div>
 			);
 		}
 		return null;
diff --git a/src/js/components/Parallax.js b/src/js/components/Parallax.js
index 6c486a55..b9330889 100755
--- a/src/js/components/Parallax.js
+++ b/src/js/components/Parallax.js
@@ -11,24 +11,27 @@ export default class Parallax extends React.Component{
 			scrollTop: 0,
 			windowWidth: 0,
 			windowHeight: 0,
-			source: {},
 			canvas: {
 				width: 0,
 				height: 0
 			},
-			image: {}
+			original: {},
+			image: {},
+			imageObject: {}
 		}
 	}
 
 	componentDidMount(){
-
-		this.loadImage( helpers.SizedImages( this.props.images ).huge )
+		var url = helpers.SizedImages( this.props.images ).huge;
+		this.loadImage( url )
 			.then(
-				response => this.setState({ image: response, source: {} })
+				response => {
+					this.setState({ image: response })
+					this.updateCanvas( response )
+				}
 			)
 
-		this.updateCanvas()
-		$(window).resize(() => this.updateCanvas());
+		$(window).resize(() => this.updateCanvas( this.state.image ));
 	}
 
 	loadImage( url ){		
@@ -38,12 +41,19 @@ export default class Parallax extends React.Component{
 			imageObject.src = url;
 
 			imageObject.onload = function(){
-				resolve( imageObject )
+				var image = {
+					width: imageObject.naturalWidth,
+					height: imageObject.naturalHeight,
+					original_width: imageObject.naturalWidth,
+					original_height: imageObject.naturalHeight,
+					object: imageObject
+				}
+				resolve( image )
 			}
 		})
 	}
 
-	updateCanvas(){
+	updateCanvas( image ){
 		var canvasWidth = $('.parallax').outerWidth();
 		var canvasHeight = $('.parallax').outerHeight();
 		if( this.state.canvas.width != canvasWidth || this.state.canvas.height != canvasHeight ){
@@ -54,53 +64,40 @@ export default class Parallax extends React.Component{
 				}
 			})
 		}
-		console.log( this.state );
+		this.renderCanvas( image );
 	}
 
-	update(){
+	renderCanvas( image ){
 
 		let self = this;
-			
-		var parallax = $('.parallax');
 		var canvasDOM = document.getElementById('parallax-canvas');
 		var context = canvasDOM.getContext('2d');
 		
-
-		var image = {};
-		Object.assign(image, self.state.source);
-
-		// set our canvas dimensions (if necessary)
-		var canvasWidth = $('#parallax-canvas').outerWidth();
-		var canvasHeight = $('#parallax-canvas').outerHeight();
-		if( context.canvas.width != canvasWidth || context.canvas.height != canvasHeight ){
-			context.canvas.width = canvasWidth;
-			context.canvas.height = canvasHeight;
-		}
-		
 		// zoom image to fill canvas, widthwise
-		if( image.width < canvasWidth || image.width > canvasWidth ){
-			var scale = canvasWidth / image.width;
+		if( image.width < this.state.canvas.width || image.width > this.state.canvas.width ){
+			var scale = this.state.canvas.width / image.width;
 			image.width = image.width * scale;
 			image.height = image.height * scale;
 		}
 		
 		// now check for fill heightwise, and zoom in if necessary
-		if( image.height < canvasHeight ){
-			var scale = canvasHeight / image.height;
+		if( image.height < this.state.canvas.height ){
+			var scale = this.state.canvas.height / image.height;
 			image.width = image.width * scale;
 			image.height = image.height * scale;
 		}
 		
 		// figure out where we want the image to be, based on scroll position
-		var percent = Math.round( self.state.scrollTop / canvasHeight * 100 );
-		var position = Math.round( (canvasHeight / 2) * (percent/100) ) - 100;
+		var percent = Math.round( self.state.scrollTop / this.state.canvas.height * 100 );
+		var position = Math.round( (this.state.canvas.height / 2) * (percent/100) ) - 100;
 		
-		image.x = ( canvasWidth / 2 ) - ( image.width / 2 );
-		image.y = ( ( canvasHeight / 2 ) - ( image.height / 2 ) ) + ( ( percent / 100 ) * 100);
+		image.x = ( this.state.canvas.width / 2 ) - ( image.width / 2 );
+		image.y = ( ( this.state.canvas.height / 2 ) - ( image.height / 2 ) ) + ( ( percent / 100 ) * 100);
 
 		// actually draw the image on the canvas
-		context.drawImage(imageObject, image.x, image.y, image.width, image.height);
+		context.drawImage(image.object, image.x, image.y, image.width, image.height);
 
+		// now update our component
 		self.setState({ image: image });
 		
 		// poll for scroll changes
diff --git a/src/js/components/SpotifyAuthenticationFrame.js b/src/js/components/SpotifyAuthenticationFrame.js
index cecf202b..7bfbcb70 100755
--- a/src/js/components/SpotifyAuthenticationFrame.js
+++ b/src/js/components/SpotifyAuthenticationFrame.js
@@ -1,8 +1,11 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
+import { Link } from 'react-router'
 import { createStore, bindActionCreators } from 'redux'
+
 import FontAwesome from 'react-fontawesome'
+import Thumbnail from './Thumbnail'
 
 import * as actions from '../services/spotify/actions'
 
@@ -51,11 +54,13 @@ class SpotifyAuthenticationFrame extends React.Component{
 	renderMe(){
 		if( !this.props.spotify.me ) return null;
 
-		if( this.props.spotify.me.display_name ){
-			return <span>Logged in as { this.props.spotify.me.display_name }</span>
-		}else{
-			return <span>Logged in as { this.props.spotify.me.id }</span>
-		}
+		return (
+			<div>
+				<Thumbnail circle={true} size="small" images={this.props.spotify.me.images} />
+				Logged in as {this.props.spotify.me.display_name ? this.props.spotify.me.display_name : null }
+				<Link to={'/user/'+this.props.spotify.me.id}>{ this.props.spotify.me.id }</Link>
+			</div>
+		)
 	}
 
 	renderAuthorizeButton(){
@@ -92,7 +97,7 @@ class SpotifyAuthenticationFrame extends React.Component{
 			);
 		}else{
 			return (
-				<button onClick={() => this.props.actions.refreshToken()}>Refresh token</button>
+				<button onClick={() => this.props.actions.refreshingToken()}>Refresh token</button>
 			);
 		}
 	}
diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js
index 1fb78d0a..79c13ccd 100755
--- a/src/js/views/Artist.js
+++ b/src/js/views/Artist.js
@@ -35,20 +35,27 @@ class Artist extends React.Component{
 			return (
 				<div>
 					<Parallax images={ this.props.spotify.artist.images } />
+
 					<div className="intro">
 						<Thumbnail size="huge" images={ this.props.spotify.artist.images } />
 						<h1>{ this.props.spotify.artist.name }</h1>
 						<p>{ this.props.spotify.artist.followers.total.toLocaleString() } followers</p>
 					</div>
-					<div className="col c3w2">
-						<h3>Top tracks</h3>
+
+					<div className="col w70">
+						<h3 className="left-padding">Top tracks</h3>
 						{ this.props.spotify.artist.tracks ? <TrackList tracks={ this.props.spotify.artist.tracks } /> : null }
 					</div>
-					<div className="col c3w1 cf">
+
+					<div className="col w5"></div>
+
+					<div className="col w25 cf">
 						<h3>Related artists</h3>
 						{ this.props.spotify.artist.related_artists ? <ArtistList artists={ this.props.spotify.artist.related_artists.slice(0,6) } /> : null }
 					</div>
-					{ this.props.spotify.artist_albums ? <AlbumGrid albums={ this.props.spotify.artist_albums.items } /> : null }
+
+					<h3 className="left-padding">Albums</h3>
+					{ this.props.spotify.artist_albums ? <AlbumGrid className="no-top-padding" albums={ this.props.spotify.artist_albums.items } /> : null }
 				</div>
 			);
 		}
diff --git a/src/scss/components/_images.scss b/src/scss/components/_images.scss
index 8f8681dd..268ca1bb 100755
--- a/src/scss/components/_images.scss
+++ b/src/scss/components/_images.scss
@@ -15,6 +15,10 @@
 		background-size: cover;
 	}
 
+	&.small {
+		max-width: 50px;
+	}
+
 	&.circle {
 		border-radius: 50%;
 	}
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss
index 5ae11ed4..b001531e 100755
--- a/src/scss/global/_core.scss
+++ b/src/scss/global/_core.scss
@@ -31,6 +31,11 @@ main {
 		padding: 40px;
 	}
 
+	h1 {
+		font-weight: 100;
+		font-size: 26px;
+	}
+
 	h3 {
 		font-size: 14px;
 		margin-bottom: 14px;
@@ -38,24 +43,46 @@ main {
 
 		&.underline {
 			padding-bottom: 4px;
-			border-bottom: 1px solid #000000;			
+			border-bottom: 1px solid #000000;
 		}
 	}
+
+	.no-top-padding {		padding-top: 0; }
+	.no-bottom-padding {	padding-bottom: 0; }
+	.no-right-padding {		padding-right: 0; }
+	.no-left-padding {		padding-left: 0; }
+
+	.top-padding {			padding-top: 20px; }
+	.bottom-padding {		padding-bottom: 20px; }
+	.right-padding {		padding-right: 40px; }
+	.left-padding {			padding-left: 40px; }
 }
 
 .col {
 	min-height: 1px;
 	float: left;
 
-	&.c2w1 {	width: 50%; }
-	&.c3w1 {	width: 33.3334%; }
-	&.c3w2 {	width: 66.6667%; }
-	&.c4w1 {	width: 25%; }
-	&.c4w3 {	width: 75%; }
-	&.c5w1 {	width: 20%; }
-	&.c5w2 {	width: 40%; }
-	&.c5w3 {	width: 60%; }
-	&.c5w4 {	width: 80%; }
+	&.w5 {		width: 5%; }
+	&.w10 {		width: 10%; }
+	&.w15 {		width: 15%; }
+	&.w20 {		width: 20%; }
+	&.w25 {		width: 25%; }
+	&.w30 {		width: 30%; }
+	&.w33 {		width: 33.3334%; }
+	&.w35 {		width: 35%; }
+	&.w40 {		width: 40%; }
+	&.w45 {		width: 45%; }
+	&.w50 {		width: 50%; }
+	&.w55 {		width: 55%; }
+	&.w60 {		width: 60%; }
+	&.w65 {		width: 65%; }
+	&.w66 {		width: 66.6667%; }
+	&.w70 {		width: 70%; }
+	&.w75 {		width: 75%; }
+	&.w80 {		width: 80%; }
+	&.w85 {		width: 85%; }
+	&.w90 {		width: 90%; }
+	&.w95 {		width: 95%; }
 }
 
 .cf{