diff --git a/app/routes/music.php b/app/routes/music.php
index 91bc2fb..609244f 100755
--- a/app/routes/music.php
+++ b/app/routes/music.php
@@ -3,9 +3,11 @@
 $app->get('/music', function() use($app) {
 
 	$albums = $app->album->all();
+  $songs = $albums[0]->songs;
 
 	$app->render('music.twig', [
 		'albums' => $albums,
+    'songs' => $songs,
 	]);
 
 })->name('music');
diff --git a/app/views/music.twig b/app/views/music.twig
index b47cc2b..19f4471 100755
--- a/app/views/music.twig
+++ b/app/views/music.twig
@@ -36,15 +36,17 @@
 		<div class="col-sm-7 col-xs-12">
 			<article id="music-player-card" class="card">
 				<audio id="music-player" controls>
-					<source src="{{ albums[0].songs[0].audio_file }}.ogg" type="audio/ogg" />
-					<source src="{{ albums[0].songs[0].audio_file }}.mp3" type="audio/mpeg" />
+					<source src="{{ songs[0].audio_file }}.ogg" type="audio/ogg" />
+					<source src="{{ songs[0].audio_file }}.mp3" type="audio/mpeg" />
 				</audio>
 			</article>
 
 			<article class="card">
-				<ul>
-					{% for song in album.songs %}
-						<li>{{ song.title }}</li>
+				<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 }}">
+              <span>{{ song.track_order }}. {{ song.title }}</span>
+            </li>
 					{% endfor %}
 				</ul>
 			</article>
@@ -55,7 +57,7 @@
 	<section class="row">
 		{% for album in albums %}
 			<!-- album details -->
-			<div class="col-sm-3 col-xs-6">
+			<div class="music-album col-sm-3 col-xs-6">
 				<div class="thumbnail shadow-1">
 					<img src="{{ album.album_art }}" alt="{{ album.title }}">
 					<div class="caption">