diff --git a/assets/js/views/queue.html b/assets/js/views/queue.html
new file mode 100644
index 0000000..b52d48b
--- /dev/null
+++ b/assets/js/views/queue.html
@@ -0,0 +1,12 @@
+<div id="queue" ng-controller="queue">
+  <header>
+    <a class="library" href="#!library">Library</a>
+    <h1>Queue</h1>
+  </header>
+  <ol class="songs">
+    <li ng-repeat="song in queueSongs" ng-class="{ playing: song.playing }">
+      <p class="title">{{ song.title }}</p>
+      <p class="artist">{{ song.artist }}</p>
+    </li>
+  </ol>
+</div>
diff --git a/assets/js/views/transport.html b/assets/js/views/transport.html
new file mode 100644
index 0000000..c2fd20e
--- /dev/null
+++ b/assets/js/views/transport.html
@@ -0,0 +1,16 @@
+<div id="transport" ng-controller="transport">
+  <div class="scrubber">
+    <div class="time elapsed">{{ elapsedTime | formatLength }}</div>
+    <div class="time total">{{ totalTime | formatLength }}</div>
+    <div class="track">
+      <div class="marker" style="left: {{ markerPosition() }}%" ng-if="!stopped()"></div>
+    </div>
+  </div>
+  <nav class="controls">
+    <button ng-click="sendCommand('previous')">previous</button>
+    <button ng-click="sendCommand('pause')" ng-if="playing()">pause</button>
+    <button ng-click="sendCommand('play')" ng-if="!playing()">play</button>
+    <button ng-click="sendCommand('stop')">stop</button>
+    <button ng-click="sendCommand('next')">next</button>
+  </nav>
+</div>
diff --git a/views/index.erb b/views/index.erb
index 5d0a7ac..000fb79 100644
--- a/views/index.erb
+++ b/views/index.erb
@@ -10,34 +10,8 @@
   <body>
     <div id="content">
       <div id="library"></div>
-      <div id="queue" ng-controller="queue">
-        <header>
-          <a class="library" href="#!library">Library</a>
-          <h1>Queue</h1>
-        </header>
-        <ol class="songs">
-          <li ng-repeat="song in queueSongs" ng-class="{ playing: song.playing }">
-            <p class="title">{{ song.title }}</p>
-            <p class="artist">{{ song.artist }}</p>
-          </li>
-        </ol>
-      </div>
-    </div>
-    <div id="transport" ng-controller="transport">
-      <div class="scrubber">
-        <div class="time elapsed">{{ elapsedTime | formatLength }}</div>
-        <div class="time total">{{ totalTime | formatLength }}</div>
-        <div class="track">
-          <div class="marker" style="left: {{ markerPosition() }}%" ng-if="!stopped()"></div>
-        </div>
-      </div>
-      <nav class="controls">
-        <button ng-click="sendCommand('previous')">previous</button>
-        <button ng-click="sendCommand('pause')" ng-if="playing()">pause</button>
-        <button ng-click="sendCommand('play')" ng-if="!playing()">play</button>
-        <button ng-click="sendCommand('stop')">stop</button>
-        <button ng-click="sendCommand('next')">next</button>
-      </nav>
+      <ng-include src="'<%= asset_path 'views/queue.html' %>'"></ng-include>
     </div>
+    <ng-include src="'<%= asset_path 'views/transport.html' %>'"></ng-include>
   </body>
 </html>
