diff --git a/assets/css/library.css.sass b/assets/css/library.css.sass
index dd8b65b..27f3648 100644
--- a/assets/css/library.css.sass
+++ b/assets/css/library.css.sass
@@ -24,12 +24,6 @@
     position: absolute
     height: 100%
     @include transition(left 0.25s ease-in-out)
-    &[data-pane="2"]
-      left: -$interface-width
-    &[data-pane="3"]
-      left: -$interface-width * 2
-    &[data-pane="4"]
-      left: -$interface-width * 3
     ol, ul
       @extend .list
     div
@@ -38,11 +32,3 @@
       height: 100%
       padding: 2.5em 0 0
       overflow: auto
-      &:first-child
-        left: 0
-      &:nth-child(2)
-        left: $interface-width
-      &:nth-child(3)
-        left: $interface-width * 2
-      &:nth-child(4)
-        left: $interface-width * 3
diff --git a/assets/js/controls/library.js b/assets/js/controls/library.js
index ba8fbec..feb12c0 100644
--- a/assets/js/controls/library.js
+++ b/assets/js/controls/library.js
@@ -2,7 +2,7 @@ var Library = can.Control.extend({
 
   init: function(element, options) {
     this.element = element;
-    this.browser = new can.Model({ title: 'Library', pane: 1 });
+    this.browser = new can.Model({ title: 'Library', currentPane: 1 });
     element.html(
       can.view('views/library.ejs', { browser: this.browser })
     );
@@ -19,19 +19,20 @@ var Library = can.Control.extend({
   },
 
   nextPane: function() {
-    this.browser.attr('pane', this.browser.attr('pane') + 1);
+    this.browser.attr('currentPane', this.browser.attr('currentPane') + 1);
   },
 
   previousPane: function() {
-    this.browser.attr('pane', this.browser.attr('pane') - 1);
+    this.browser.attr('currentPane', this.browser.attr('currentPane') - 1);
   },
 
   addPane: function(data) {
     var newElement = document.createElement('div');
-    newElement.className = data.show;
     $('.browser', this.element).append(newElement);
+    data['pos'] = this.panes.length + 1;
     var newPane = new Pane(newElement, data);
     this.panes.push(newPane);
+    this.browser.attr('title', newPane.title);
     this.nextPane();
   },
 
@@ -56,6 +57,9 @@ var Pane = can.Control.extend({
 
   init: function(element, data) {
     this.element = element;
+    this.element.addClass(data.show);
+    var left = (data.pos - 1) * 20;
+    this.element.css('left', left + 'em');
     this.data = data;
     this.renderPane[data.show].call(this, data);
   },
@@ -65,15 +69,25 @@ var Pane = can.Control.extend({
       this.element.html(
         can.view('views/library/root.ejs', {})
       );
+      this.title = 'Library';
     },
     artists: function(data) {
       Artist.findAll({}, this.renderCallback('artists'));
+      this.title = 'Artists';
     },
     albums: function(data) {
       Album.findAll({ artist: data.artist }, this.renderCallback('albums'));
+      if (data.artist)
+        this.title = data.artist;
+      else
+        this.title = 'Albums';
     },
     songs: function(data) {
       Song.findAll({ artist: data.artist, album: data.album }, this.renderCallback('songs'));
+      if (data.album)
+        this.title = data.album;
+      else
+        this.title = 'Songs';
     }
   },
 
diff --git a/public/views/library.ejs b/public/views/library.ejs
index 031104d..954095d 100644
--- a/public/views/library.ejs
+++ b/public/views/library.ejs
@@ -2,7 +2,11 @@
   <a class="close" href="#!">Close</a>
   <h1><%= browser.attr('title') %></h1>
 </header>
-<div class="browser" data-pane="<%= browser.attr('pane') %>">
-  <div class="root"></div>
-  <%# can.view.render('views/library/root.ejs', {}) %>
+
+<div class="browser"
+     data-current-pane="<%= browser.attr('currentPane') %>"
+     style="left: -<%= (browser.attr('currentPane') - 1) * 20 %>em;">
+
+  <div class="root" style="left: 0;"></div>
+
 </div>