diff --git a/assets/javascripts/controllers/library.controller.js b/assets/javascripts/controllers/library.controller.js
index 94a3066..926f6aa 100644
--- a/assets/javascripts/controllers/library.controller.js
+++ b/assets/javascripts/controllers/library.controller.js
@@ -14,6 +14,8 @@ mpdClient.controller('library', function ($scope, api) {
     ]
   }
 
+  $scope.currentPanelTemplate = 'panels/root.html'
+
   $scope.panes = [rootPane]
 
   $scope.currentPaneIndex = 0
@@ -22,7 +24,14 @@ mpdClient.controller('library', function ($scope, api) {
     return $scope.panes[$scope.currentPaneIndex]
   }
 
-  $scope.newPane = function (path, params) {
-    console.log(path)
+  $scope.newPane = function (path, params, queryParams) {
+    $scope.panes.push({
+      title: params.title,
+      entries: api.getItems(path).query(queryParams)
+    })
+
+    $scope.currentPaneIndex += 1
+
+    $scope.currentPanelTemplate = 'panels' + path + '.html'
   }
 })
diff --git a/assets/javascripts/controllers/mpd-client.controller.js b/assets/javascripts/controllers/mpd-client.controller.js
index ca23756..4f77fd0 100644
--- a/assets/javascripts/controllers/mpd-client.controller.js
+++ b/assets/javascripts/controllers/mpd-client.controller.js
@@ -1,5 +1,3 @@
 mpdClient.controller('mpd-client', function ($rootScope, $scope) {
   $scope.showLibrary = function () { $scope.$broadcast('library:show') }
-
-  $scope.currentPanelTemplate = 'panels/root.html'
 })
diff --git a/assets/javascripts/services/api.service.js b/assets/javascripts/services/api.service.js
index 061e9bc..6d2c8f5 100644
--- a/assets/javascripts/services/api.service.js
+++ b/assets/javascripts/services/api.service.js
@@ -17,6 +17,10 @@ mpdClient.factory('api', function ($rootScope, $http, $resource) {
 
     getQueue: function () {
       return $resource(apiUrl + '/queue')
+    },
+
+    getItems: function (path) {
+      return $resource(apiUrl + path)
     }
   }
 })
diff --git a/public/panels/albums.html b/public/panels/albums.html
new file mode 100644
index 0000000..583f80c
--- /dev/null
+++ b/public/panels/albums.html
@@ -0,0 +1,6 @@
+<ol class="albums">
+  <li ng-repeat="entry in currentPane().entries"
+      ng-click="newPane('/songs', { title: entry.title }, { artist: entry.artist, album: entry.title })">
+    {{ entry.title }}
+  </li>
+</ol>
diff --git a/public/panels/artists.html b/public/panels/artists.html
new file mode 100644
index 0000000..0e5f193
--- /dev/null
+++ b/public/panels/artists.html
@@ -0,0 +1,6 @@
+<ol class="artists">
+  <li ng-repeat="entry in currentPane().entries"
+      ng-click="newPane('/albums', { title: entry.name }, { artist: entry.name })">
+    {{ entry.name }}
+  </li>
+</ol>
diff --git a/public/panels/root.html b/public/panels/root.html
index 3d1af7a..6cc031c 100644
--- a/public/panels/root.html
+++ b/public/panels/root.html
@@ -1,3 +1,6 @@
 <ul class="root">
-  <li ng-repeat="entry in currentPane().entries" ng-click="newPane(entry.path, {})">{{ entry.label }}</li>
+  <li ng-repeat="entry in currentPane().entries"
+      ng-click="newPane(entry.path, { title: entry.label })">
+    {{ entry.label }}
+  </li>
 </ul>
diff --git a/public/panels/songs.html b/public/panels/songs.html
new file mode 100644
index 0000000..42f6a3a
--- /dev/null
+++ b/public/panels/songs.html
@@ -0,0 +1,7 @@
+<ol class="songs">
+  <li ng-repeat="entry in currentPane().entries" ng-click="newPane('/songs', { title: entry.title, artist: entry.artist })">
+    <p class="title">{{ entry.title }}</p>
+    <p class="artist">{{ entry.artist }}</p>
+    <p class="length">{{ entry.length | formatLength }}</p>
+  </li>
+</ol>