diff --git a/assets/css/library.css.sass b/assets/css/library.css.sass
index 5c176c2..b1b914b 100644
--- a/assets/css/library.css.sass
+++ b/assets/css/library.css.sass
@@ -29,20 +29,15 @@ mpd-library
     top: 0
     header
       top: 0
-  .browser
-    position: absolute
-    height: 100%
+  ul, ol
     width: 100%
-    @include transition(left 0.25s ease-in-out)
-    ul, ol
-      width: 100%
-    ul.root, ol.artists, ol.albums
-      @extend .list
-    ol.songs
-      @extend .song-list
-    mpd-panel
-      position: absolute
-      width: $interface-width
-      height: 100%
-      padding: 2.5em 0 0
-      overflow: auto
+  ul.root, ol.artists, ol.albums
+    @extend .list
+  ol.songs
+    @extend .song-list
+  mpd-panel
+    position: absolute
+    width: $interface-width
+    height: 100%
+    padding: 2.5em 0 0
+    overflow: auto
diff --git a/assets/js/components/library.js b/assets/js/components/library.js
index 83ff0f5..950018c 100644
--- a/assets/js/components/library.js
+++ b/assets/js/components/library.js
@@ -4,6 +4,10 @@ can.Component.extend({
 
   template: can.view('views/library.mustache'),
 
+  scope: {
+    currentPane: 0
+  },
+
   events: {
     show: function() {
       $(this.element).addClass('show');
@@ -13,15 +17,17 @@ can.Component.extend({
       $(this.element).removeClass('show');
     },
 
-    'a.close click': 'hide',
+    'route': function(data) {
+      this.hide();
+    },
 
     ':type route': function(data) {
       if (data.type == 'library') {
         this.show();
-        if (data.pane > this.browser.currentPane) {
+        if (data.pane > this.currentPane) {
           this.addPane(data);
         }
-        else if (data.pane < this.browser.currentPane) {
+        else if (data.pane < this.currentPane) {
           this.removePane(data);
         }
       }
diff --git a/assets/js/components/panel.js b/assets/js/components/panel.js
index 49249d0..85a8125 100644
--- a/assets/js/components/panel.js
+++ b/assets/js/components/panel.js
@@ -10,22 +10,30 @@ can.Component.extend({
     artist: '@',
     album: '@',
     title: function() {
-      if (this.show == 'root')
-        return 'Library';
+      if (this.show == 'root') return 'Library';
     },
     fetchItems: {
-      root: new can.Map,
+      root: new can.List(['Artists', 'Albums', 'Songs']),
       artists: function() { return Artist.findAll({}) },
       albums: function() { Album.findAll({ artist: this.artist }) },
       songs: function() { Song.findAll({ artist: this.artist, album: this.album }) }
     }
   },
 
-  events: {},
+  events: {
+  },
 
   helpers: {
     renderItems: function() {
-      return can.view.render('views/library/' + this.show, {});
+      return can.view.render('views/library/' + this.show, {
+        items: this.fetchItems.root
+      });
+    },
+
+    rootLink: function(label, show) {
+      return can.route.link(label, {
+        type: 'library', show: show
+      });
     }
   }
 
diff --git a/public/views/library/root.mustache b/public/views/library/root.mustache
index cd7dc64..cbcf85f 100644
--- a/public/views/library/root.mustache
+++ b/public/views/library/root.mustache
@@ -1,5 +1,3 @@
 <ul class="root">
-  <li>{{can.route.link('Artists', { page: 'library', show: 'artists', pane: pane + 1 })}}</li>
-  <li>{{can.route.link('Albums', { page: 'library', show: 'albums', pane: pane + 1 })}}</li>
-  <li>{{can.route.link('Songs', { page: 'library', show: 'songs', pane: pane + 1 })}}</li>
+  <li>{{{rootLink 'Artists', 'artists'}}}</li>
 </ul>