diff --git a/app/Fieldprotocol/Music/Album.php b/app/Fieldprotocol/Music/Album.php
index 1290f1c..12f5bd8 100644
--- a/app/Fieldprotocol/Music/Album.php
+++ b/app/Fieldprotocol/Music/Album.php
@@ -19,4 +19,16 @@ class Album extends Eloquent {
     return $this->hasMany('Fieldprotocol\Music\Song');
   }
 
+  public function links() {
+    return $this->hasMany('Fieldprotocol\Music\StoreLink', 'album_id');
+  }
+
+	public function releaseDate() {
+		return date('F j, Y', strtotime($this->release_date));
+	}
+
+	public function releaseYear() {
+		return date('Y', strtotime($this->release_date));
+	}
+
 }
diff --git a/app/Fieldprotocol/Music/StoreLink.php b/app/Fieldprotocol/Music/StoreLink.php
new file mode 100644
index 0000000..fcce421
--- /dev/null
+++ b/app/Fieldprotocol/Music/StoreLink.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace Fieldprotocol\Music;
+
+use Illuminate\Database\Eloquent\Model as Eloquent;
+
+class StoreLink extends Eloquent {
+
+	protected $table = 'store_links';
+
+	protected $fillable = [
+		'link_name',
+		'link_ref',
+	];
+
+  public function album() {
+    return $this->belongsTo('Fieldprotocol\Music\Album', 'album_id');
+  }
+
+}
diff --git a/app/routes.php b/app/routes.php
index 8cb4c0b..73398c5 100755
--- a/app/routes.php
+++ b/app/routes.php
@@ -1,9 +1,15 @@
 <?php
 
-// Home view(s)
-require 'routes/index.php';
-require 'routes/about.php';
-require 'routes/contact.php';
-require 'routes/home.php';
-require 'routes/music.php';
-require 'routes/shows.php';
+// Main view routes
+require 'routes/pages/index.php';
+require 'routes/pages/about.php';
+require 'routes/pages/contact.php';
+require 'routes/pages/home.php';
+require 'routes/pages/music.php';
+require 'routes/pages/shows.php';
+
+// API routes
+require 'routes/apiv1/music.php';
+
+// Errors
+require 'routes/errors/404.php';
diff --git a/app/routes/apiv1/music.php b/app/routes/apiv1/music.php
new file mode 100644
index 0000000..4b45590
--- /dev/null
+++ b/app/routes/apiv1/music.php
@@ -0,0 +1,38 @@
+<?php
+
+// retrieve album info
+$app->get('/apiv1/music/album-info/:albumid', function($albumid) use($app) {
+
+  if (!ctype_digit($albumid)) {
+    echo 'Don\'t do that';
+    return;
+  }
+
+  $album = $app->album->where('id', $albumid)->first();
+
+  if ($album) {
+    echo json_encode($album);
+  } else {
+    $app->notFound();
+  }
+
+})->name('apiv1.music.album-info');
+
+// retrieve an album's songs
+$app->get('/apiv1/music/album-songs/:albumid', function($albumid) use($app) {
+
+  if (!ctype_digit($albumid)) {
+    echo 'Don\'t do that';
+    return;
+  }
+
+  $album = $app->album->where('id', $albumid)->first();
+
+  if ($album) {
+    $json = ['songs' => $album->songs];
+    echo json_encode($json);
+  } else {
+    $app->notFound();
+  }
+
+})->name('apiv1.music.album-songs');
diff --git a/app/routes/errors/404.php b/app/routes/errors/404.php
new file mode 100644
index 0000000..de40286
--- /dev/null
+++ b/app/routes/errors/404.php
@@ -0,0 +1,5 @@
+<?php
+
+$app->notFound(function() use ($app) {
+  $app->render('errors/404.twig');
+});
diff --git a/app/routes/music.php b/app/routes/music.php
deleted file mode 100755
index 2e1ea9e..0000000
--- a/app/routes/music.php
+++ /dev/null
@@ -1,13 +0,0 @@
-<?php
-
-$app->get('/music', function() use($app) {
-
-	$albums = $app->album->all()->sortByDesc('release_date')->values()->all();
-  $songs = $albums[0]->songs;
-
-	$app->render('music.twig', [
-		'albums' => $albums,
-    'songs' => $songs,
-	]);
-
-})->name('music');
diff --git a/app/routes/about.php b/app/routes/pages/about.php
similarity index 66%
rename from app/routes/about.php
rename to app/routes/pages/about.php
index 5857481..fdad5dc 100755
--- a/app/routes/about.php
+++ b/app/routes/pages/about.php
@@ -2,6 +2,6 @@
 
 $app->get('/about', function() use($app) {
 
-	$app->render('about.twig');
+	$app->render('pages/about.twig');
 
 })->name('about');
diff --git a/app/routes/contact.php b/app/routes/pages/contact.php
similarity index 66%
rename from app/routes/contact.php
rename to app/routes/pages/contact.php
index e125bd9..931f4a6 100755
--- a/app/routes/contact.php
+++ b/app/routes/pages/contact.php
@@ -2,6 +2,6 @@
 
 $app->get('/contact', function() use($app) {
 
-	$app->render('contact.twig');
+	$app->render('pages/contact.twig');
 
 })->name('contact');
diff --git a/app/routes/home.php b/app/routes/pages/home.php
similarity index 66%
rename from app/routes/home.php
rename to app/routes/pages/home.php
index be6b6c8..d55a9e0 100755
--- a/app/routes/home.php
+++ b/app/routes/pages/home.php
@@ -2,6 +2,6 @@
 
 $app->get('/home', function() use($app) {
 
-	$app->render('home.twig');
+	$app->render('pages/home.twig');
 
 })->name('home');
diff --git a/app/routes/index.php b/app/routes/pages/index.php
similarity index 100%
rename from app/routes/index.php
rename to app/routes/pages/index.php
diff --git a/app/routes/pages/music.php b/app/routes/pages/music.php
new file mode 100755
index 0000000..f64ba0d
--- /dev/null
+++ b/app/routes/pages/music.php
@@ -0,0 +1,16 @@
+<?php
+
+// music page
+$app->get('/music', function() use($app) {
+
+  $albums = $app->album->all()->sortByDesc('release_date')->values()->all();
+  $songs = $albums[0]->songs;
+  $links = $albums[0]->links;
+
+  $app->render('pages/music.twig', [
+    'albums' => $albums,
+    'songs' => $songs,
+    'links' => $links,
+  ]);
+
+})->name('music');
diff --git a/app/routes/shows.php b/app/routes/pages/shows.php
similarity index 96%
rename from app/routes/shows.php
rename to app/routes/pages/shows.php
index df150e7..32863e3 100755
--- a/app/routes/shows.php
+++ b/app/routes/pages/shows.php
@@ -10,7 +10,7 @@ $app->get('/shows', function() use($app) {
 		$show->time = date('H:i', strtotime($show->datetime));
 	}
 
-	$app->render('shows.twig', [
+	$app->render('pages/shows.twig', [
 		'shows' => $shows,
 	]);
 
diff --git a/app/views/errors/404.twig b/app/views/errors/404.twig
new file mode 100644
index 0000000..d63907a
--- /dev/null
+++ b/app/views/errors/404.twig
@@ -0,0 +1,13 @@
+{% extends 'templates/default.twig' %}
+
+{% block title %}404 Error{% endblock %}
+
+{% block content %}
+	<!-- Error information section -->
+	<section id="error-section" class="row">
+		<div class="col-xs-12 card hover-box shadow-1">
+			<h4>404 Error</h4>
+      <p>The URL you were looking for doesn't exist. Perhaps you'd like to start over at the <a href="{{ urlFor('home') }}">home page</a>?</p>
+		</div>
+	</section>
+{% endblock %}
diff --git a/app/views/about.twig b/app/views/pages/about.twig
similarity index 100%
rename from app/views/about.twig
rename to app/views/pages/about.twig
diff --git a/app/views/contact.twig b/app/views/pages/contact.twig
similarity index 100%
rename from app/views/contact.twig
rename to app/views/pages/contact.twig
diff --git a/app/views/home.twig b/app/views/pages/home.twig
similarity index 100%
rename from app/views/home.twig
rename to app/views/pages/home.twig
diff --git a/app/views/music.twig b/app/views/pages/music.twig
similarity index 53%
rename from app/views/music.twig
rename to app/views/pages/music.twig
index c5784b7..64a9018 100644
--- a/app/views/music.twig
+++ b/app/views/pages/music.twig
@@ -1,7 +1,6 @@
 {% extends 'templates/default.twig' %}
 
 {% block javascripts %}
-  <script type="text/javascript" src="/js/modules/music-player.js"></script>
   <script type="text/javascript" src="/js/music.js"></script>
 {% endblock %}
 
@@ -21,12 +20,21 @@
     <!-- left album stuff -->
     <article class="col-sm-5 col-xs-12">
       <div class="thumbnail shadow-1">
-        <img class="image-responsive" src="{{ albums[0].album_art }}" alt="{{ albums[0].title }}">
+        <img id="album-artwork" class="image-responsive album-art" src="{{ albums[0].album_art }}" alt="{{ albums[0].title }}">
         <div class="caption">
-          <h3>{{ albums[0].title }}</h3>
+          <h3 id="album-title">{{ albums[0].title }}</h3>
+          <h5 id="album-release">Released on <span>{{ albums[0].releaseDate }}</span></h5>
           {% if albums[0].description %}
             <hr />
-            <p>{{ albums[0].description }}</p>
+            <p id="album-description">{{ albums[0].description }}</p>
+          {% endif %}
+          {% if links %}
+            <hr />
+            <ul style="padding-left:20px">
+              {% for link in links %}
+                <li>Buy on <a href="{{ link.link_ref }}">{{ link.link_name }}</a></li>
+              {% endfor %}
+            </ul>
           {% endif %}
         </div>
       </div>
@@ -35,6 +43,7 @@
     <!-- right album stuff -->
     <div class="col-sm-7 col-xs-12">
       <article id="music-player-card" class="card">
+        <h4 id="track-title">{{ songs[0].title }}</h4>
         <audio id="music-player" controls>
           <source src="{{ songs[0].audio_file }}.ogg" type="audio/ogg" />
           <source src="{{ songs[0].audio_file }}.mp3" type="audio/mpeg" />
@@ -44,7 +53,7 @@
       <article class="card">
         <ul class="now-playing-list">
           {% for song in songs %}
-            <li class="music-track" data-title="{{ song.title }}" data-album="{{ song.album_id }}" data-order="{{ song.track_order }}" data-path="{{ song.audio_file }}">
+            <li class="music-track {% if loop.index0 == 0 %}selected{% endif %}" data-trackid="{{ song.id }}" data-title="{{ song.title }}" data-album="{{ song.album_id }}" data-order="{{ song.track_order }}" data-path="{{ song.audio_file }}">
               <span>{{ song.track_order }}. {{ song.title }}</span>
             </li>
           {% endfor %}
@@ -57,11 +66,15 @@
   <section class="row">
     {% for album in albums %}
       <!-- album details -->
-      <div class="music-album col-sm-3 col-xs-6">
+      <div class="music-album {% if loop.index0 == 0 %}selected{% endif %} col-sm-3 col-xs-6" data-albumid="{{ album.id }}">
         <div class="thumbnail shadow-1">
-          <img src="{{ album.album_art }}" alt="{{ album.title }}">
+          <img class="album-art" src="{{ album.album_art }}" alt="{{ album.title }}">
           <div class="caption">
-            <h5>{{ album.title }}</h5>
+            <h5>{{ album.title }} ({{ album.releaseYear }})</h5>
+            {% if album.description %}
+              <hr />
+              <p id="album-description">{{ album.description|length > 50 ? album.description[:50] ~ '...' : album.description }}</p>
+            {% endif %}
           </div>
         </div>
       </div>
diff --git a/app/views/shows.twig b/app/views/pages/shows.twig
similarity index 100%
rename from app/views/shows.twig
rename to app/views/pages/shows.twig
diff --git a/app/views/templates/default.twig b/app/views/templates/default.twig
index 7f94ac9..9c9562e 100755
--- a/app/views/templates/default.twig
+++ b/app/views/templates/default.twig
@@ -1,28 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="utf-8" />
-	<!--Let browser know website is optimized for mobile-->
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
-	<title>{% block title %}{% endblock %} | Halftone</title>
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
+  <meta charset="utf-8" />
+  <!--Let browser know website is optimized for mobile-->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+  <title>{% block title %}{% endblock %} | Halftone</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.23.4/mediaelementplayer.min.css">
   <link rel="stylesheet" href="/css/main.css"  media="screen,projection"/>
-	{% block stylesheets %}{% endblock %}
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+  {% block stylesheets %}{% endblock %}
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
-	<script type="text/javascript" src="/js/main.js"></script>
-	{% block javascripts %}{% endblock %}
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.23.4/mediaelement-and-player.min.js"></script>
+  <script type="text/javascript" src="/js/main.js"></script>
+  {% block javascripts %}{% endblock %}
 </head>
 <body>
-	<div id="wrapper">
-		<div class="container">
-			{% include 'templates/partials/header.twig' %}
+  <div id="wrapper">
+    <div class="container">
+      {% include 'templates/partials/header.twig' %}
 
-			{% block content %}{% endblock %}
-		</div>
-	</div>
+      {% block content %}{% endblock %}
+    </div>
+  </div>
 
-	{% include 'templates/partials/footer.twig' %}
+  {% include 'templates/partials/footer.twig' %}
 </body>
 </html>
diff --git a/assets/sass/pages/_about.sass b/assets/sass/pages/_about.sass
index 9ce6b13..755cbe1 100755
--- a/assets/sass/pages/_about.sass
+++ b/assets/sass/pages/_about.sass
@@ -1,42 +1,42 @@
 #about-header
-	margin-bottom: 25px
-	padding-bottom: 15px
-	background: white
-	
-	img
-		+position(absolute, 0 null null 0)
-		+size(100% 480px)
-		/*+filter(blur(2px))
-	
-	.about-band
-		margin-top: 405px
-	
-	h2
-		margin-bottom: 20px
-		color: white
-	
-	p
-		color: $text-color
+  margin-bottom: 25px
+  padding-bottom: 15px
+  background: white
+
+  img
+    +position(absolute, 0 null null 0)
+    +size(100% 480px)
+    /*+filter(blur(2px))
+
+  .about-band
+    margin-top: 405px
+
+  h2
+    margin-bottom: 20px
+    color: white
+
+  p
+    color: $text-color
 
 #about-content
-	section
-		a
-			display: block
-			+position(absolute, 0 null null 15px)
-			+calc(width, "100% - 30px")
-			+calc(height, "100% - 20px")
-			border-radius: 5px
-			text-decoration: none
-			+transition(all, 300ms ease-in)
-		
-		h3,
-		h4,
-		p
-			color: $text-color
-		
-		&:hover
-			a
-				background: rgba(#000, .15)
-		
-		hr
-			border-color: #bbb
+  section
+    a
+      display: block
+      +position(absolute, 0 null null 15px)
+      +calc(width, "100% - 30px")
+      +calc(height, "100% - 20px")
+      border-radius: 5px
+      text-decoration: none
+      +transition(all, 300ms ease-in)
+
+    h3,
+    h4,
+    p
+      color: $text-color
+
+    &:hover
+      a
+        background: rgba(#000, .15)
+
+    hr
+      border-color: #bbb
diff --git a/assets/sass/pages/_contact.sass b/assets/sass/pages/_contact.sass
index 3e7a64b..814851d 100755
--- a/assets/sass/pages/_contact.sass
+++ b/assets/sass/pages/_contact.sass
@@ -1,42 +1,39 @@
 #contact-header
-	margin-top: -20px
-	text-align: center
+  margin-top: -20px
+  text-align: center
 
-	h1
-		color: white
-		font:
-			size: 34px
-			weight: bold
+  h1
+    color: white
+    font:
+      size: 34px
+      weight: bold
 
 #contact-info
-	.card
-		max-width: 680px
-		margin-top: 15px
-		padding:
-			top: 20px
-			bottom: 20px
-		background: #f0f0f0
+  .card
+    max-width: 680px
+    margin-top: 15px
+    padding:
+      top: 20px
+      bottom: 20px
+    background: #f0f0f0
 
-		hr
-			border-color: #666
+    a,
+    p,
+    h3
+      text-align: center
+      font-size: 20px
 
-		a,
-		p,
-		h3
-			text-align: center
-			font-size: 20px
+    p
+      padding: 5px
+      color: #212121
 
-		p
-			padding: 5px
-			color: #212121
+    a
+      color: darkred
+      text-decoration: none
+      +transition(color 200ms ease-in-out)
 
-		a
-			color: darkred
-			text-decoration: none
-			+transition(color 200ms ease-in-out)
+      &:hover
+        color: red
 
-			&:hover
-				color: red
-
-		h3
-			margin-bottom: 15px
+    h3
+      margin-bottom: 15px
diff --git a/assets/sass/pages/_home.sass b/assets/sass/pages/_home.sass
index 804347f..a7f4d15 100755
--- a/assets/sass/pages/_home.sass
+++ b/assets/sass/pages/_home.sass
@@ -1,39 +1,39 @@
 #featured
-	height: auto
-	margin: 0 auto 20px
-	padding: 5px
-	background: none
-	
-	.hover-box
-		+transition(all, 200ms)
+  height: auto
+  margin: 0 auto 20px
+  padding: 5px
+  background: none
 
-		&:hover
-			box-shadow: 0 6px 20px 0 rgba(#000, 0.19), 0 8px 17px 0 rgba(#000, 0.2)
+  .hover-box
+    +transition(all, 200ms)
 
-	div
-		margin-bottom: 25px
+    &:hover
+      box-shadow: 0 6px 20px 0 rgba(#000, 0.19), 0 8px 17px 0 rgba(#000, 0.2)
 
-		a
-			display: block
-			width: 100%
-			//max-width: 500px
-			margin-left: auto
-			margin-right: auto
+  div
+    margin-bottom: 25px
+
+    a
+      display: block
+      width: 100%
+      //max-width: 500px
+      margin-left: auto
+      margin-right: auto
+
+    img
+      width: 100%
 
-		img
-			width: 100%
-		
 #wrapper-home
-	display: block
-	min-height: 300px
-	padding: 0
-	
-	.content
-		margin: 0
-		padding: 0
-	
-	.actions
-		#mailing-list
-			p
-				margin-bottom: 7px
-				text-align: center
+  display: block
+  min-height: 300px
+  padding: 0
+
+  .content
+    margin: 0
+    padding: 0
+
+  .actions
+    #mailing-list
+      p
+        margin-bottom: 7px
+        text-align: center
diff --git a/assets/sass/pages/_music.sass b/assets/sass/pages/_music.sass
index 6372473..c731768 100755
--- a/assets/sass/pages/_music.sass
+++ b/assets/sass/pages/_music.sass
@@ -1,49 +1,77 @@
 #music-header
-	text-align: center
-	
-	h1
-		color: white
-		font:
-			size: 34px
-			weight: bold
+  text-align: center
 
-//#music-player-card
+  h1
+    color: white
+    font:
+      size: 34px
+      weight: bold
 
 #music-list-section
-	.music-list
-		position: relative
-		+transition(background, 200ms)
+  .music-list
+    position: relative
+    +transition(background, 200ms)
 
-		&:hover
-			cursor: pointer
-			background: #f0f0f0
+    &:hover
+      cursor: pointer
+      background: #f0f0f0
 
-	.music-list-header
-		margin: 10px 0
+  .music-list-header
+    margin: 10px 0
 
 .now-playing-list,
 .music-list ol
-	margin-left: 15px
-	margin-right: 15px
-	color: $text-color
+  +margin(10px 15px null 10px)
+  color: $text-color
 
-	li
-		+transition(background, 200ms)
+  li
+    +transition(background, 200ms)
 
-		&:hover
-			background: #f0f0f0
+    &:hover
+      background: #f0f0f0
+      cursor: pointer
 
-			a
-				color: $main-color
+      a
+        color: $main-color
 
-		&.selected
-			background: #e0e0e0
+    &.selected
+      background: #e0e0e0
 
-	li,
-	a
-		display: block
-		+size(100% 100%)
-		padding: 8px 5px
-		color: $text-color
-		text-decoration: none
-		+transition(color, 200ms)
+      a
+        color: $main-color
+
+  li,
+  a
+    display: block
+    +size(100% 100%)
+    padding: 8px 5px
+    color: $text-color
+    text-decoration: none
+    +transition(color, 200ms)
+
+#music-player
+  width: 100%
+
+#track-title
+  +padding(null 10px null 10px)
+
+.album-art
+  width: 100%
+
+.music-album
+  &.selected
+    .thumbnail
+      background: #e0e0e0
+
+      a
+        color: $main-color
+
+  .thumbnail
+    +transition(background, 200ms)
+
+    &:hover
+      background: #f0f0f0
+      cursor: pointer
+
+      a
+        color: $main-color
diff --git a/assets/sass/pages/_shows.sass b/assets/sass/pages/_shows.sass
index 1f1b1f3..5d95ec9 100755
--- a/assets/sass/pages/_shows.sass
+++ b/assets/sass/pages/_shows.sass
@@ -1,38 +1,37 @@
 .shows-header
-	margin:
-		top: -20px
-		bottom: 20px
-	text-align: center
-	
-	h3
-		color: #fff
-		font:
-			size: 26px
-			weight: bold
+  margin:
+    top: -20px
+    bottom: 20px
+  text-align: center
+
+  h3
+    color: #fff
+    font:
+      size: 26px
+      weight: bold
 
 #shows-table
-	margin-top: 20px
+  margin-top: 20px
 
-	tr
-		border-bottom: 1px solid rgba(#999, .4)
-		
-		&:last-child
-			border-bottom: none
-		
-		td
-			vertical-align: middle
-			border: none
-			
-			p,
-			a
-				font-size: 18px
-				color: white
-				
-			a
-				font-weight: 600
-				text-decoration: underline
-				+transition(all, 200ms ease-in)
-				
-				&:hover
-					color: $main-color
-		
\ No newline at end of file
+  tr
+    border-bottom: 1px solid rgba(#999, .4)
+
+    &:last-child
+      border-bottom: none
+
+    td
+      vertical-align: middle
+      border: none
+
+      p,
+      a
+        font-size: 18px
+        color: white
+
+      a
+        font-weight: 600
+        text-decoration: underline
+        +transition(all, 200ms ease-in)
+
+        &:hover
+          color: $main-color
diff --git a/assets/sass/partials/_base.sass b/assets/sass/partials/_base.sass
index efd3835..ae3b9e1 100755
--- a/assets/sass/partials/_base.sass
+++ b/assets/sass/partials/_base.sass
@@ -1,41 +1,44 @@
 *
-	margin: 0px
-	padding: 0px
-	font-family: "Open Sans", sans-serif
-	font-size: 14px
+  margin: 0px
+  padding: 0px
+  font-family: "Open Sans", sans-serif
+  font-size: 14px
 
 html
-	width: 100%
-	+calc(height, "100% - 200px")
+  width: 100%
+  +calc(height, "100% - 200px")
 
 body
-	+size(100% auto)
-	height: 100%
+  +size(100% auto)
+  height: 100%
 
 #wrapper
-	+size(100% auto)
-	min-height: 100%
-	margin-bottom: 200px
-	padding-bottom: 50px
-	background: url(/img/bg2.jpg) no-repeat center center fixed
-	+background-size(cover)
+  +size(100% auto)
+  min-height: 100%
+  margin-bottom: 200px
+  padding-bottom: 50px
+  background: url(/img/bg2.jpg) no-repeat center center fixed
+  +background-size(cover)
 
 #header
-	display: block
-	padding: -10px 0
-	text-align: center
+  display: block
+  padding: -10px 0
+  text-align: center
+
+hr
+  border-color: #ccc
 
 
 /* Box shadow styles used for material design
 .shadow-0
-	border: 1px solid #eee
+  border: 1px solid #eee
 .shadow-1
-	box-shadow: 0 2px 10px 0 rgba(#000, 0.16), 0 2px 5px 0 rgba(#000, 0.26)
+  box-shadow: 0 2px 10px 0 rgba(#000, 0.16), 0 2px 5px 0 rgba(#000, 0.26)
 .shadow-2
-	box-shadow: 0 6px 20px 0 rgba(#000, 0.19), 0 8px 17px 0 rgba(#000, 0.2)
+  box-shadow: 0 6px 20px 0 rgba(#000, 0.19), 0 8px 17px 0 rgba(#000, 0.2)
 .shadow-3
-	box-shadow: 0 17px 50px 0 rgba(#000, 0.19), 0 12px 15px 0 rgba(#000, 0.24)
+  box-shadow: 0 17px 50px 0 rgba(#000, 0.19), 0 12px 15px 0 rgba(#000, 0.24)
 .shadow-4
-	box-shadow: 0 25px 55px 0 rgba(#000, 0.21), 0 16px 28px 0 rgba(#000, 0.22)
+  box-shadow: 0 25px 55px 0 rgba(#000, 0.21), 0 16px 28px 0 rgba(#000, 0.22)
 .shadow-5
-	box-shadow: 0 40px 77px 0 rgba(#000, 0.22), 0 27px 24px 0 rgba(#000, 0.2)
+  box-shadow: 0 40px 77px 0 rgba(#000, 0.22), 0 27px 24px 0 rgba(#000, 0.2)
diff --git a/assets/sass/partials/_card.sass b/assets/sass/partials/_card.sass
index 3821d7d..45fd4b4 100644
--- a/assets/sass/partials/_card.sass
+++ b/assets/sass/partials/_card.sass
@@ -1,52 +1,52 @@
 .card
-	display: block
-	height: auto
-	margin-bottom: 15px
-	padding: 15px 10px
-	background: white
+  display: block
+  height: auto
+  margin-bottom: 15px
+  padding: 15px 10px
+  background: white
 
-	&.hover-box
-		+transition(box-shadow, 200ms)
+  &.hover-box
+    +transition(box-shadow, 200ms)
 
-		&:hover
-			box-shadow: 0 6px 20px 0 rgba(#000, 0.19), 0 8px 17px 0 rgba(#000, 0.2)
-	
-	.underline
-		text-decoration: underline
-		
-	input[type=text]
-		background: none
-		border: none
-		outline: none
-		
-	.input-group
-		position: relative
-		display: block
-		width: 100%
-		margin: 20px auto 10px
-		
-		input
-			display: inline-block
-			width: 100%
-			padding: 10px 0
-			border-bottom: solid 2px $main-color
-			color: rgb(25, 25, 25)
-			font-size: 16px
-			
-			&:focus, &:active
-				outline: none
-				
-		label
-			+position(absolute, 50% null null 0)
-			+transform(translateY(-50%))
-			font-style: italic
-			font-size: 16px
-			color: #999
-			pointer-events: none
-			+transition(all, 200ms ease-out 0s)
-			
-		input:focus + label,
-		input.has-value + label
-			top: -5px
-			font-size: 12px
-			color: $main-color
+    &:hover
+      box-shadow: 0 6px 20px 0 rgba(#000, 0.19), 0 8px 17px 0 rgba(#000, 0.2)
+
+  .underline
+    text-decoration: underline
+
+  input[type=text]
+    background: none
+    border: none
+    outline: none
+
+  .input-group
+    position: relative
+    display: block
+    width: 100%
+    margin: 20px auto 10px
+
+    input
+      display: inline-block
+      width: 100%
+      padding: 10px 0
+      border-bottom: solid 2px $main-color
+      color: rgb(25, 25, 25)
+      font-size: 16px
+
+      &:focus, &:active
+        outline: none
+
+    label
+      +position(absolute, 50% null null 0)
+      +transform(translateY(-50%))
+      font-style: italic
+      font-size: 16px
+      color: #999
+      pointer-events: none
+      +transition(all, 200ms ease-out 0s)
+
+    input:focus + label,
+    input.has-value + label
+      top: -5px
+      font-size: 12px
+      color: $main-color
diff --git a/assets/sass/partials/_footer.sass b/assets/sass/partials/_footer.sass
index 87889f3..63b1c3a 100755
--- a/assets/sass/partials/_footer.sass
+++ b/assets/sass/partials/_footer.sass
@@ -1,39 +1,39 @@
 #footer
-	+position(fixed, null null 0 0)
-	width: 100%
-	background: white
-	margin: 0
-	padding: 10px 15px
-	z-index: -9999999
-	
-	.column-info
-		text-align: center
-	
-		p
-			font:
-				size: 18px
-				weight: bold
-			text-decoration: underline
-	
-		ul
-			list-style: none
-			
-			a
-				text-decoration: none
-				color: $text-color
-				+transition(all, 200ms)
-	
-				&:hover
-					color: $main-color
-	
-	.copyright
-		p
-			color: $text-color
-			text-align: center
-		
-		hr
-			border-color: #bbb
+  +position(fixed, null null 0 0)
+  width: 100%
+  background: white
+  margin: 0
+  padding: 10px 15px
+  z-index: -9999999
 
-	.mailing-list
-		p
-			color: $text-color
+  .column-info
+    text-align: center
+
+    p
+      font:
+        size: 18px
+        weight: bold
+      text-decoration: underline
+
+    ul
+      list-style: none
+
+      a
+        text-decoration: none
+        color: $text-color
+        +transition(all, 200ms)
+
+        &:hover
+          color: $main-color
+
+  .copyright
+    p
+      color: $text-color
+      text-align: center
+
+    hr
+      border-color: #bbb
+
+  .mailing-list
+    p
+      color: $text-color
diff --git a/assets/sass/partials/_header.sass b/assets/sass/partials/_header.sass
index 7907eee..4637fd3 100644
--- a/assets/sass/partials/_header.sass
+++ b/assets/sass/partials/_header.sass
@@ -1,4 +1,4 @@
 #header
-	.band-logo
-		width: 100%
-		max-width: 600px
\ No newline at end of file
+  .band-logo
+    width: 100%
+    max-width: 600px
diff --git a/assets/sass/partials/_other.sass b/assets/sass/partials/_other.sass
index f3731b4..aa934a6 100644
--- a/assets/sass/partials/_other.sass
+++ b/assets/sass/partials/_other.sass
@@ -1,2 +1,2 @@
 .full-width
-	width: 100%
+  width: 100%
diff --git a/public/css/main.css b/public/css/main.css
index 9ee5717..7bfe729 100755
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1 +1,728 @@
-/*! normalize.sass v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible;text-transform:none}select{text-transform:none}button,html input[type="button"]{-webkit-appearance:button;cursor:pointer}input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input::-moz-focus-inner{border:0;padding:0}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans"),local("OpenSans"),url(//themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format("woff")}*{margin:0px;padding:0px;font-family:"Open Sans",sans-serif;font-size:14px}html{width:100%;height:-webkit-calc(100% - 200px);height:calc(100% - 200px)}body{height:auto;width:100%;height:100%}#wrapper{height:auto;width:100%;min-height:100%;margin-bottom:200px;padding-bottom:50px;background:url(/img/bg2.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}#header{display:block;padding:-10px 0;text-align:center}.shadow-0{border:1px solid #eee}.shadow-1{box-shadow:0 2px 10px 0 rgba(0,0,0,0.16),0 2px 5px 0 rgba(0,0,0,0.26)}.shadow-2{box-shadow:0 6px 20px 0 rgba(0,0,0,0.19),0 8px 17px 0 rgba(0,0,0,0.2)}.shadow-3{box-shadow:0 17px 50px 0 rgba(0,0,0,0.19),0 12px 15px 0 rgba(0,0,0,0.24)}.shadow-4{box-shadow:0 25px 55px 0 rgba(0,0,0,0.21),0 16px 28px 0 rgba(0,0,0,0.22)}.shadow-5{box-shadow:0 40px 77px 0 rgba(0,0,0,0.22),0 27px 24px 0 rgba(0,0,0,0.2)}#header .band-logo{width:100%;max-width:600px}#nav{margin-bottom:20px}#nav .navbar-nav{display:inline-block}#nav .navbar-nav{float:none}#nav .navbar-collapse,#nav .navbar-header{text-align:center}#nav ul{list-style:none;text-align:center}#nav ul .nav_item{display:inline-block;background:none;border:none;border-bottom:3px solid rgba(229,20,0,0);border-radius:none;-webkit-transition:border-color,200ms;-moz-transition:border-color,200ms;transition:border-color,200ms}#nav ul .nav_item a{display:block;height:100%;width:100%;padding:5px 14px;text-decoration:none;color:#fff;font-size:32px;font-weight:600;-webkit-transition:color,200ms;-moz-transition:color,200ms;transition:color,200ms}#nav ul .nav_item:hover{background-color:transparent;border-color:#e51400}#nav ul .nav_item:hover a{background-color:transparent;color:#e51400}#nav #navbar-collapse-button.navbar-toggle{float:none;margin:0;color:#e51400;font-size:32px;-webkit-transition:color,200ms;-moz-transition:color,200ms;transition:color,200ms}#nav #navbar-collapse-button.navbar-toggle:hover,#nav #navbar-collapse-button.navbar-toggle:active{background-color:transparent}#nav #navbar-collapse-button.navbar-toggle.collapsed{color:#fff}#nav #navbar-collapse-button.navbar-toggle.collapsed:hover{color:#e51400}@media (max-width: 767px){#nav .navbar-collapse{background:#212121;border-radius:5px;border:1px solid #212121;box-shadow:inset 0 0 6px #212121}#nav ul .nav_item{display:block;padding:5px}}#footer{position:fixed;bottom:0;left:0;width:100%;background:#fff;margin:0;padding:10px 15px;z-index:-9999999}#footer .column-info{text-align:center}#footer .column-info p{font-size:18px;font-weight:bold;text-decoration:underline}#footer .column-info ul{list-style:none}#footer .column-info ul a{text-decoration:none;color:#212121;-webkit-transition:all,200ms;-moz-transition:all,200ms;transition:all,200ms}#footer .column-info ul a:hover{color:#e51400}#footer .copyright p{color:#212121;text-align:center}#footer .copyright hr{border-color:#bbb}#footer .mailing-list p{color:#212121}.card{display:block;height:auto;margin-bottom:15px;padding:15px 10px;background:#fff}.card.hover-box{-webkit-transition:box-shadow,200ms;-moz-transition:box-shadow,200ms;transition:box-shadow,200ms}.card.hover-box:hover{box-shadow:0 6px 20px 0 rgba(0,0,0,0.19),0 8px 17px 0 rgba(0,0,0,0.2)}.card .underline{text-decoration:underline}.card input[type=text]{background:none;border:none;outline:none}.card .input-group{position:relative;display:block;width:100%;margin:20px auto 10px}.card .input-group input{display:inline-block;width:100%;padding:10px 0;border-bottom:solid 2px #e51400;color:#191919;font-size:16px}.card .input-group input:focus,.card .input-group input:active{outline:none}.card .input-group label{position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);font-style:italic;font-size:16px;color:#999;pointer-events:none;-webkit-transition:all,200ms ease-out 0s;-moz-transition:all,200ms ease-out 0s;transition:all,200ms ease-out 0s}.card .input-group input:focus+label,.card .input-group input.has-value+label{top:-5px;font-size:12px;color:#e51400}.full-width{width:100%}#about-header{margin-bottom:25px;padding-bottom:15px;background:#fff}#about-header img{position:absolute;top:0;left:0;height:480px;width:100%}#about-header .about-band{margin-top:405px}#about-header h2{margin-bottom:20px;color:#fff}#about-header p{color:#212121}#about-content section a{display:block;position:absolute;top:0;left:15px;width:-webkit-calc(100% - 30px);width:calc(100% - 30px);height:-webkit-calc(100% - 20px);height:calc(100% - 20px);border-radius:5px;text-decoration:none;-webkit-transition:all,300ms ease-in;-moz-transition:all,300ms ease-in;transition:all,300ms ease-in}#about-content section h3,#about-content section h4,#about-content section p{color:#212121}#about-content section:hover a{background:rgba(0,0,0,0.15)}#about-content section hr{border-color:#bbb}#contact-header{margin-top:-20px;text-align:center}#contact-header h1{color:#fff;font-size:34px;font-weight:bold}#contact-info .card{max-width:680px;margin-top:15px;padding-top:20px;padding-bottom:20px;background:#f0f0f0}#contact-info .card hr{border-color:#666}#contact-info .card a,#contact-info .card p,#contact-info .card h3{text-align:center;font-size:20px}#contact-info .card p{padding:5px;color:#212121}#contact-info .card a{color:darkred;text-decoration:none;-webkit-transition:color 200ms ease-in-out;-moz-transition:color 200ms ease-in-out;transition:color 200ms ease-in-out}#contact-info .card a:hover{color:red}#contact-info .card h3{margin-bottom:15px}#featured{height:auto;margin:0 auto 20px;padding:5px;background:none}#featured .hover-box{-webkit-transition:all,200ms;-moz-transition:all,200ms;transition:all,200ms}#featured .hover-box:hover{box-shadow:0 6px 20px 0 rgba(0,0,0,0.19),0 8px 17px 0 rgba(0,0,0,0.2)}#featured div{margin-bottom:25px}#featured div a{display:block;width:100%;margin-left:auto;margin-right:auto}#featured div img{width:100%}#wrapper-home{display:block;min-height:300px;padding:0}#wrapper-home .content{margin:0;padding:0}#wrapper-home .actions #mailing-list p{margin-bottom:7px;text-align:center}#music-header{text-align:center}#music-header h1{color:#fff;font-size:34px;font-weight:bold}#music-list-section .music-list{position:relative;-webkit-transition:background,200ms;-moz-transition:background,200ms;transition:background,200ms}#music-list-section .music-list:hover{cursor:pointer;background:#f0f0f0}#music-list-section .music-list-header{margin:10px 0}.now-playing-list,.music-list ol{margin-left:15px;margin-right:15px;color:#212121}.now-playing-list li,.music-list ol li{-webkit-transition:background,200ms;-moz-transition:background,200ms;transition:background,200ms}.now-playing-list li:hover,.music-list ol li:hover{background:#f0f0f0}.now-playing-list li:hover a,.music-list ol li:hover a{color:#e51400}.now-playing-list li.selected,.music-list ol li.selected{background:#e0e0e0}.now-playing-list li,.now-playing-list a,.music-list ol li,.music-list ol a{display:block;height:100%;width:100%;padding:8px 5px;color:#212121;text-decoration:none;-webkit-transition:color,200ms;-moz-transition:color,200ms;transition:color,200ms}.shows-header{margin-top:-20px;margin-bottom:20px;text-align:center}.shows-header h3{color:#fff;font-size:26px;font-weight:bold}#shows-table{margin-top:20px}#shows-table tr{border-bottom:1px solid rgba(153,153,153,0.4)}#shows-table tr:last-child{border-bottom:none}#shows-table tr td{vertical-align:middle;border:none}#shows-table tr td p,#shows-table tr td a{font-size:18px;color:#fff}#shows-table tr td a{font-weight:600;text-decoration:underline;-webkit-transition:all,200ms ease-in;-moz-transition:all,200ms ease-in;transition:all,200ms ease-in}#shows-table tr td a:hover{color:#e51400}
+/*! normalize.sass v3.0.2 | MIT License | git.io/normalize */
+/* Compiled to sass by Greg from Field Protocol */
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom. */
+html {
+  font-family: sans-serif;
+  /* 1 */
+  -ms-text-size-adjust: 100%;
+  /* 2 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */ }
+
+/**
+ * Remove default margin. */
+body {
+  margin: 0; }
+
+/* HTML5 display definitions
+ * ========================================================================== */
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11. */
+article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
+  display: block; }
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
+audio, canvas, progress, video {
+  display: inline-block;
+  /* 1 */
+  vertical-align: baseline;
+  /* 2 */ }
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices. */
+audio:not([controls]) {
+  display: none;
+  height: 0; }
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */
+[hidden], template {
+  display: none; }
+
+/* Links
+ * ========================================================================== */
+/**
+ * Remove the gray background color from active links in IE 10. */
+a {
+  background-color: transparent; }
+  a:active, a:hover {
+    outline: 0; }
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers. */
+/* Text-level semantics
+ * ========================================================================== */
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */
+abbr[title] {
+  border-bottom: 1px dotted; }
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */
+b, strong {
+  font-weight: bold; }
+
+/**
+ * Address styling not present in Safari and Chrome. */
+dfn {
+  font-style: italic; }
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome. */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0; }
+
+/**
+ * Address styling not present in IE 8/9. */
+mark {
+  background: #ff0;
+  color: #000; }
+
+/**
+ * Address inconsistent and variable font size in all browsers. */
+small {
+  font-size: 80%; }
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers. */
+sub {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline; }
+
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+  top: -0.5em; }
+
+sub {
+  bottom: -0.25em; }
+
+/* Embedded content
+ * ========================================================================== */
+/**
+ * Remove border when inside `a` element in IE 8/9/10. */
+img {
+  border: 0; }
+
+/**
+ * Correct overflow not hidden in IE 9/10/11. */
+svg:not(:root) {
+  overflow: hidden; }
+
+/* Grouping content
+ * ========================================================================== */
+/**
+ * Address margin not present in IE 8/9 and Safari. */
+figure {
+  margin: 1em 40px; }
+
+/**
+ * Address differences between Firefox and other browsers. */
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0; }
+
+/**
+ * Contain overflow in all browsers. */
+pre {
+  overflow: auto; }
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers. */
+code, kbd, pre, samp {
+  font-family: monospace, monospace;
+  font-size: 1em; }
+
+/* Forms
+ * ========================================================================== */
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set. */
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */
+button, input, optgroup, select, textarea {
+  color: inherit;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+  margin: 0;
+  /* 3 */ }
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11. */
+button {
+  overflow: visible;
+  text-transform: none; }
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox. */
+select {
+  text-transform: none; }
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others. */
+button, html input[type="button"] {
+  -webkit-appearance: button;
+  /* 2 */
+  cursor: pointer;
+  /* 3 */ }
+
+input[type="reset"], input[type="submit"] {
+  -webkit-appearance: button;
+  /* 2 */
+  cursor: pointer;
+  /* 3 */ }
+
+/**
+ * Re-set default cursor for disabled elements. */
+button[disabled], html input[disabled] {
+  cursor: default; }
+
+/**
+ * Remove inner padding and border in Firefox 4+. */
+button::-moz-focus-inner {
+  border: 0;
+  padding: 0; }
+
+input {
+  line-height: normal; }
+  input::-moz-focus-inner {
+    border: 0;
+    padding: 0; }
+  input[type="checkbox"], input[type="radio"] {
+    box-sizing: border-box;
+    /* 1 */
+    padding: 0;
+    /* 2 */ }
+  input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
+    height: auto; }
+  input[type="search"] {
+    -webkit-appearance: textfield;
+    /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box;
+    /* 2 */
+    box-sizing: content-box; }
+    input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
+      -webkit-appearance: none; }
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet. */
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10. */
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`. */
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof). */
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance). */
+/**
+ * Define consistent border, margin, and padding. */
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em; }
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets. */
+legend {
+  border: 0;
+  /* 1 */
+  padding: 0;
+  /* 2 */ }
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11. */
+textarea {
+  overflow: auto; }
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */
+optgroup {
+  font-weight: bold; }
+
+/* Tables
+ * ========================================================================== */
+/**
+ * Remove most spacing between table cells. */
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
+td, th {
+  padding: 0; }
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Open Sans"), local("OpenSans"), url(//themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format("woff"); }
+* {
+  margin: 0px;
+  padding: 0px;
+  font-family: "Open Sans", sans-serif;
+  font-size: 14px; }
+
+html {
+  width: 100%;
+  height: -webkit-calc(100% - 200px);
+  height: calc(100% - 200px); }
+
+body {
+  height: auto;
+  width: 100%;
+  height: 100%; }
+
+#wrapper {
+  height: auto;
+  width: 100%;
+  min-height: 100%;
+  margin-bottom: 200px;
+  padding-bottom: 50px;
+  background: url(/img/bg2.jpg) no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover; }
+
+#header {
+  display: block;
+  padding: -10px 0;
+  text-align: center; }
+
+hr {
+  border-color: #ccc; }
+
+/* Box shadow styles used for material design */
+.shadow-0 {
+  border: 1px solid #eee; }
+
+.shadow-1 {
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26); }
+
+.shadow-2 {
+  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2); }
+
+.shadow-3 {
+  box-shadow: 0 17px 50px 0 rgba(0, 0, 0, 0.19), 0 12px 15px 0 rgba(0, 0, 0, 0.24); }
+
+.shadow-4 {
+  box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21), 0 16px 28px 0 rgba(0, 0, 0, 0.22); }
+
+.shadow-5 {
+  box-shadow: 0 40px 77px 0 rgba(0, 0, 0, 0.22), 0 27px 24px 0 rgba(0, 0, 0, 0.2); }
+
+#header .band-logo {
+  width: 100%;
+  max-width: 600px; }
+
+#nav {
+  margin-bottom: 20px; }
+  #nav .navbar-nav {
+    display: inline-block; }
+  #nav .navbar-nav {
+    float: none; }
+  #nav .navbar-collapse,
+  #nav .navbar-header {
+    text-align: center; }
+  #nav ul {
+    list-style: none;
+    text-align: center; }
+    #nav ul .nav_item {
+      display: inline-block;
+      background: none;
+      border: none;
+      border-bottom: 3px solid rgba(229, 20, 0, 0);
+      border-radius: none;
+      -webkit-transition: border-color, 200ms;
+      -moz-transition: border-color, 200ms;
+      transition: border-color, 200ms; }
+      #nav ul .nav_item a {
+        display: block;
+        height: 100%;
+        width: 100%;
+        padding: 5px 14px;
+        text-decoration: none;
+        color: #fff;
+        font-size: 32px;
+        font-weight: 600;
+        -webkit-transition: color, 200ms;
+        -moz-transition: color, 200ms;
+        transition: color, 200ms; }
+      #nav ul .nav_item:hover {
+        background-color: transparent;
+        border-color: #e51400; }
+        #nav ul .nav_item:hover a {
+          background-color: transparent;
+          color: #e51400; }
+  #nav #navbar-collapse-button.navbar-toggle {
+    float: none;
+    margin: 0;
+    color: #e51400;
+    font-size: 32px;
+    -webkit-transition: color, 200ms;
+    -moz-transition: color, 200ms;
+    transition: color, 200ms; }
+    #nav #navbar-collapse-button.navbar-toggle:hover, #nav #navbar-collapse-button.navbar-toggle:active {
+      background-color: transparent; }
+    #nav #navbar-collapse-button.navbar-toggle.collapsed {
+      color: #fff; }
+      #nav #navbar-collapse-button.navbar-toggle.collapsed:hover {
+        color: #e51400; }
+  @media (max-width: 767px) {
+    #nav .navbar-collapse {
+      background: #212121;
+      border-radius: 5px;
+      border: 1px solid #212121;
+      box-shadow: inset 0 0 6px #212121; }
+    #nav ul .nav_item {
+      display: block;
+      padding: 5px; } }
+
+#footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: white;
+  margin: 0;
+  padding: 10px 15px;
+  z-index: -9999999; }
+  #footer .column-info {
+    text-align: center; }
+    #footer .column-info p {
+      font-size: 18px;
+      font-weight: bold;
+      text-decoration: underline; }
+    #footer .column-info ul {
+      list-style: none; }
+      #footer .column-info ul a {
+        text-decoration: none;
+        color: #212121;
+        -webkit-transition: all, 200ms;
+        -moz-transition: all, 200ms;
+        transition: all, 200ms; }
+        #footer .column-info ul a:hover {
+          color: #e51400; }
+  #footer .copyright p {
+    color: #212121;
+    text-align: center; }
+  #footer .copyright hr {
+    border-color: #bbb; }
+  #footer .mailing-list p {
+    color: #212121; }
+
+.card {
+  display: block;
+  height: auto;
+  margin-bottom: 15px;
+  padding: 15px 10px;
+  background: white; }
+  .card.hover-box {
+    -webkit-transition: box-shadow, 200ms;
+    -moz-transition: box-shadow, 200ms;
+    transition: box-shadow, 200ms; }
+    .card.hover-box:hover {
+      box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2); }
+  .card .underline {
+    text-decoration: underline; }
+  .card input[type=text] {
+    background: none;
+    border: none;
+    outline: none; }
+  .card .input-group {
+    position: relative;
+    display: block;
+    width: 100%;
+    margin: 20px auto 10px; }
+    .card .input-group input {
+      display: inline-block;
+      width: 100%;
+      padding: 10px 0;
+      border-bottom: solid 2px #e51400;
+      color: #191919;
+      font-size: 16px; }
+      .card .input-group input:focus, .card .input-group input:active {
+        outline: none; }
+    .card .input-group label {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      -webkit-transform: translateY(-50%);
+      -moz-transform: translateY(-50%);
+      -ms-transform: translateY(-50%);
+      -o-transform: translateY(-50%);
+      transform: translateY(-50%);
+      font-style: italic;
+      font-size: 16px;
+      color: #999;
+      pointer-events: none;
+      -webkit-transition: all, 200ms ease-out 0s;
+      -moz-transition: all, 200ms ease-out 0s;
+      transition: all, 200ms ease-out 0s; }
+    .card .input-group input:focus + label,
+    .card .input-group input.has-value + label {
+      top: -5px;
+      font-size: 12px;
+      color: #e51400; }
+
+.full-width {
+  width: 100%; }
+
+#about-header {
+  margin-bottom: 25px;
+  padding-bottom: 15px;
+  background: white; }
+  #about-header img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 480px;
+    width: 100%;
+    /*+filter(blur(2px)) */ }
+  #about-header .about-band {
+    margin-top: 405px; }
+  #about-header h2 {
+    margin-bottom: 20px;
+    color: white; }
+  #about-header p {
+    color: #212121; }
+
+#about-content section a {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 15px;
+  width: -webkit-calc(100% - 30px);
+  width: calc(100% - 30px);
+  height: -webkit-calc(100% - 20px);
+  height: calc(100% - 20px);
+  border-radius: 5px;
+  text-decoration: none;
+  -webkit-transition: all, 300ms ease-in;
+  -moz-transition: all, 300ms ease-in;
+  transition: all, 300ms ease-in; }
+#about-content section h3,
+#about-content section h4,
+#about-content section p {
+  color: #212121; }
+#about-content section:hover a {
+  background: rgba(0, 0, 0, 0.15); }
+#about-content section hr {
+  border-color: #bbb; }
+
+#contact-header {
+  margin-top: -20px;
+  text-align: center; }
+  #contact-header h1 {
+    color: white;
+    font-size: 34px;
+    font-weight: bold; }
+
+#contact-info .card {
+  max-width: 680px;
+  margin-top: 15px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  background: #f0f0f0; }
+  #contact-info .card a,
+  #contact-info .card p,
+  #contact-info .card h3 {
+    text-align: center;
+    font-size: 20px; }
+  #contact-info .card p {
+    padding: 5px;
+    color: #212121; }
+  #contact-info .card a {
+    color: darkred;
+    text-decoration: none;
+    -webkit-transition: color 200ms ease-in-out;
+    -moz-transition: color 200ms ease-in-out;
+    transition: color 200ms ease-in-out; }
+    #contact-info .card a:hover {
+      color: red; }
+  #contact-info .card h3 {
+    margin-bottom: 15px; }
+
+#featured {
+  height: auto;
+  margin: 0 auto 20px;
+  padding: 5px;
+  background: none; }
+  #featured .hover-box {
+    -webkit-transition: all, 200ms;
+    -moz-transition: all, 200ms;
+    transition: all, 200ms; }
+    #featured .hover-box:hover {
+      box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2); }
+  #featured div {
+    margin-bottom: 25px; }
+    #featured div a {
+      display: block;
+      width: 100%;
+      margin-left: auto;
+      margin-right: auto; }
+    #featured div img {
+      width: 100%; }
+
+#wrapper-home {
+  display: block;
+  min-height: 300px;
+  padding: 0; }
+  #wrapper-home .content {
+    margin: 0;
+    padding: 0; }
+  #wrapper-home .actions #mailing-list p {
+    margin-bottom: 7px;
+    text-align: center; }
+
+#music-header {
+  text-align: center; }
+  #music-header h1 {
+    color: white;
+    font-size: 34px;
+    font-weight: bold; }
+
+#music-list-section .music-list {
+  position: relative;
+  -webkit-transition: background, 200ms;
+  -moz-transition: background, 200ms;
+  transition: background, 200ms; }
+  #music-list-section .music-list:hover {
+    cursor: pointer;
+    background: #f0f0f0; }
+#music-list-section .music-list-header {
+  margin: 10px 0; }
+
+.now-playing-list,
+.music-list ol {
+  margin-top: 10px;
+  margin-right: 15px;
+  margin-left: 10px;
+  color: #212121; }
+  .now-playing-list li,
+  .music-list ol li {
+    -webkit-transition: background, 200ms;
+    -moz-transition: background, 200ms;
+    transition: background, 200ms; }
+    .now-playing-list li:hover,
+    .music-list ol li:hover {
+      background: #f0f0f0;
+      cursor: pointer; }
+      .now-playing-list li:hover a,
+      .music-list ol li:hover a {
+        color: #e51400; }
+    .now-playing-list li.selected,
+    .music-list ol li.selected {
+      background: #e0e0e0; }
+      .now-playing-list li.selected a,
+      .music-list ol li.selected a {
+        color: #e51400; }
+  .now-playing-list li,
+  .now-playing-list a,
+  .music-list ol li,
+  .music-list ol a {
+    display: block;
+    height: 100%;
+    width: 100%;
+    padding: 8px 5px;
+    color: #212121;
+    text-decoration: none;
+    -webkit-transition: color, 200ms;
+    -moz-transition: color, 200ms;
+    transition: color, 200ms; }
+
+#music-player {
+  width: 100%; }
+
+#track-title {
+  padding-right: 10px;
+  padding-left: 10px; }
+
+.album-art {
+  width: 100%; }
+
+.music-album.selected .thumbnail {
+  background: #e0e0e0; }
+  .music-album.selected .thumbnail a {
+    color: #e51400; }
+.music-album .thumbnail {
+  -webkit-transition: background, 200ms;
+  -moz-transition: background, 200ms;
+  transition: background, 200ms; }
+  .music-album .thumbnail:hover {
+    background: #f0f0f0;
+    cursor: pointer; }
+    .music-album .thumbnail:hover a {
+      color: #e51400; }
+
+.shows-header {
+  margin-top: -20px;
+  margin-bottom: 20px;
+  text-align: center; }
+  .shows-header h3 {
+    color: #fff;
+    font-size: 26px;
+    font-weight: bold; }
+
+#shows-table {
+  margin-top: 20px; }
+  #shows-table tr {
+    border-bottom: 1px solid rgba(153, 153, 153, 0.4); }
+    #shows-table tr:last-child {
+      border-bottom: none; }
+    #shows-table tr td {
+      vertical-align: middle;
+      border: none; }
+      #shows-table tr td p,
+      #shows-table tr td a {
+        font-size: 18px;
+        color: white; }
+      #shows-table tr td a {
+        font-weight: 600;
+        text-decoration: underline;
+        -webkit-transition: all, 200ms ease-in;
+        -moz-transition: all, 200ms ease-in;
+        transition: all, 200ms ease-in; }
+        #shows-table tr td a:hover {
+          color: #e51400; }
diff --git a/public/img/albums/halftone.jpeg b/public/img/albums/halftone.jpeg
new file mode 100644
index 0000000..4c48537
Binary files /dev/null and b/public/img/albums/halftone.jpeg differ
diff --git a/public/js/music.js b/public/js/music.js
index 2631b8d..af85b53 100755
--- a/public/js/music.js
+++ b/public/js/music.js
@@ -1,7 +1,158 @@
+var player = '';
+
 $(document).ready(function() {
-	$('#music-player').musicPlayer({
-		'audio': '#music-player',
-		'volume': .5,
-		'startTime': 0
-	})
-});
\ No newline at end of file
+  player = $('#music-player').get(0);
+
+  // set the player's volume to 0.5 by default
+  player.volume = 0.5;
+
+  // on music track click
+  $('.now-playing-list').on('click', '.music-track', function() {
+    // change selected track
+    changeSelectedTrack(this);
+  });
+
+  // on album art click
+  $('.music-album').on('click', '.thumbnail', function() {
+    // change selected album
+    changeSelectedAlbum(this);
+  });
+
+  // on track end
+  $(player).on('ended', function() {
+    // find selected track
+    changeSelectedTrack($('.music-track.selected').next().get(0));
+  });
+});
+
+function changeSelectedAlbum(albumElem) {
+  var oldSelected = $('.music-album.selected');
+  var newSelected = $(albumElem).parent();
+
+  if (oldSelected.data('albumid') != newSelected.data('albumid')) {
+    // remove selected class from the old element and add it to the new one
+    oldSelected.removeClass('selected');
+    newSelected.addClass('selected');
+
+    // change album info
+    getAlbumInfo(albumElem);
+    // change available songs
+    getAlbumSongs(albumElem);
+  }
+}
+
+function getAlbumInfo(albumElem) {
+  albumElem = $(albumElem).parent();
+
+  $.get('/apiv1/music/album-info/' + albumElem.data('albumid'), function(data) {
+    var json = $.parseJSON(data);
+
+    // change album artwork
+    $('#album-artwork').attr('src', json.album_art);
+    // change album title
+    $('#album-title').text(json.title);
+    // change album release date
+    $('#album-release span').text(formatReleaseDate(json.release_date));
+    // change album description
+    $('#album-description').text(json.description);
+  });
+}
+
+function formatReleaseDate(d) {
+  var monthNames = [
+    "January", "February", "March",
+    "April", "May", "June", "July",
+    "August", "September", "October",
+    "November", "December"
+  ];
+
+  var date = new Date(d);
+  var day = date.getDate();
+  var monthIndex = date.getMonth();
+  var year = date.getFullYear();
+
+  return monthNames[monthIndex] + ' ' + day + ', ' + year;
+}
+
+function getAlbumSongs(albumElem) {
+  albumElem = $(albumElem).parent();
+
+  $.get('/apiv1/music/album-songs/' + albumElem.data('albumid'), function(data) {
+    var json = $.parseJSON(data);
+    var playlist = $('.now-playing-list');
+    playlist.empty();
+
+    for (var i = 0; i < json.songs.length; i++) {
+      var song = json.songs[i];
+
+      var songElem = $('<li></li>')
+        .addClass('music-track')
+        .attr('data-trackid', song.id)
+        .attr('data-title', song.title)
+        .attr('data-album', song.album_id)
+        .attr('data-order', song.track_order)
+        .attr('data-path', song.audio_file);
+
+      if (i === 0) {
+        songElem.addClass('selected');
+      }
+
+      songElem.html('<span>' + song.track_order + '. ' + song.title + '</span>');
+
+      playlist.append(songElem);
+    }
+
+    changeAudioSources(playlist.find('.selected'), false);
+  });
+}
+
+function changeSelectedTrack(trackElem) {
+  var oldSelected = $('.now-playing-list .music-track.selected');
+  var newSelected = $(trackElem);
+
+  if (oldSelected.data('trackid') != newSelected.data('trackid')) {
+    // remove selected class from the old element and add it to the new one
+    oldSelected.removeClass('selected');
+    newSelected.addClass('selected');
+
+    // now change the audio sources
+    changeAudioSources(trackElem, true);
+  }
+}
+
+function changeAudioSources(trackElem, autoplay) {
+  trackElem = $(trackElem);
+  var playerSources = $('#music-player source');
+
+  if (autoplay === null) {
+    autoplay = false;
+  }
+
+  // retrieve audio file path from selected element
+  var audioFilePath = trackElem.data('path');
+
+  // loop through the audio player source elements
+  playerSources.each(function() {
+    // jQuery-ize the element
+    source = $(this);
+
+    if (source.attr('type') == 'audio/ogg') {
+      // OGG source file
+      source.attr('src', audioFilePath + '.ogg');
+    } else if (source.attr('type') == 'audio/mpeg') {
+      // MP3 source file
+      source.attr('src', audioFilePath + '.mp3');
+    }
+  });
+
+  // change track title
+  $('#track-title').text(trackElem.data('title'));
+
+  // reload music player
+  player.load();
+
+  if (autoplay) {
+    // start playing new song
+    player.play();
+  }
+}