diff --git a/frontend/bower.json b/frontend/bower.json
index 8bd94ce..7569783 100644
--- a/frontend/bower.json
+++ b/frontend/bower.json
@@ -23,7 +23,7 @@
     "paper-header-panel": "PolymerElements/paper-header-panel#^1.1.6",
     "paper-toolbar": "PolymerElements/paper-toolbar#^1.1.4",
     "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^1.0.9",
-    "paper-icon-button": "PolymerElements/paper-icon-button#^1.1.2",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^2.2.0",
     "iron-icons": "PolymerElements/iron-icons#^1.1.3",
     "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.1",
     "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.2.1",
@@ -58,6 +58,7 @@
     "paper-spinner": "^1.0.0",
     "iron-resizable-behavior": "^1.0.4",
     "paper-checkbox": "^1.2.0",
-    "webcomponentsjs": "^v1.1.0"
+    "webcomponentsjs": "^v1.1.0",
+    "paper-icon-button": "^1.1.2"
   }
 }
diff --git a/frontend/src/ketr-photos/ketr-photos.html b/frontend/src/ketr-photos/ketr-photos.html
index 13b41ce..ef667fc 100755
--- a/frontend/src/ketr-photos/ketr-photos.html
+++ b/frontend/src/ketr-photos/ketr-photos.html
@@ -19,6 +19,7 @@
 <link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
 <link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../../bower_components/paper-input/paper-input.html">
 <link rel="import" href="../../bower_components/paper-radio-group/paper-radio-group.html">
 <link rel="import" href="../../bower_components/paper-radio-button/paper-radio-button.html">
@@ -90,6 +91,22 @@
         color: white;
       }
 
+      #yearSlider {
+        margin-top: 0.5em;
+        position: fixed;
+        display: block;
+        opacity: 0;
+        right: 5px;
+        bottom: 0px;
+        padding: 0.5em;
+        width: 120px;
+        background-color: rgb(16, 0, 16);
+        color: white;
+        text-align: center;
+        transition: opacity 0.5s ease-in-out;
+        -webkit-transition: opacity 0.5s ease-in-out;
+      }
+      
       #pager {
         margin-top: 0.5em;
         position: fixed;
@@ -176,8 +193,8 @@
 
     <app-location route="{{route}}"></app-location>
 
-    <app-drawer-layout id="albumLayout">
-      <app-drawer persistent id="albumList" slot="drawer">
+    <app-drawer-layout id="albumLayout" force-narrow=true>
+      <app-drawer id="searchBox" slot="drawer">
         <div id="albums" class="layout vertical">
           <template is="dom-repeat" items="[[breadcrumb(path)]]">
             <div on-tap="loadPath">[[item.name]] /</div>
@@ -189,8 +206,9 @@
       </app-drawer>
       <app-header-layout>
         <app-header reveals slot="header">
-          <div id="header" class="layout horizontal center justified">
-            <div id="breadcrumb" class="horizontal layout center">
+          <div id="header" class="layout horizontal center">
+              <paper-icon-button icon="search" on-tap="searchBoxToggle"></paper-icon-button>
+              <div id="breadcrumb" class="horizontal layout center">
               <template is="dom-repeat" items="[[breadcrumb(path)]]">
                 <div on-tap="loadPath">[[item.name]] /</div>
               </template>
@@ -205,6 +223,11 @@
       </div>
     </app-drawer-layout>
     <div id="pager">pager</div>
+    <div id="yearSlider">
+      <template is="dom-repeat" items="[[years]]">
+        <div>item</div>
+      </template>
+    </div>
     <paper-toast id="toast"></paper-toast>
     <photo-lightbox tabindex="0" id="lightbox" on-close="lightBoxClose" on-next="lightBoxNext" on-previous="lightBoxPrevious"></photo-lightbox>
   </template>
@@ -215,6 +238,10 @@
       Polymer({
         is: "ketr-photos",
         properties: {
+          years: {
+            type: Array,
+            value: []
+          },
           order: {
             type: String,
             value: "by-date"
@@ -271,22 +298,19 @@
         },
 
         observers: [
-          "widthChanged(calcWidth)",
-          "orderChanged(order)"
+          "widthChanged(calcWidth)"
         ],
 
-        orderChanged: function(order) {
-          console.log("Order: " + order);
-          if (order == "by-album") {
-            this.$.albumLayout.forceNarrow = false;
-            this.$.albumList.open();
-            this.$.albumList.persistent = true;
-          } else if (order == "by-date") {
-            this.$.albumList.close();
+        searchBoxToggle: function(event) {
+          if (this.$.searchBox.opened) {
+            this.$.searchBox.close();
             this.$.albumLayout.forceNarrow = true;
-            this.$.albumList.resetLayout();
+            this.$.searchBox.resetLayout();
+          } else {
+            this.$.searchBox.open();
+            this.$.albumLayout.forceNarrow = false;
+            this.$.searchBox.persistent = true;
           }
-          Polymer.dom(this.$.thumbnails).innerHTML = "";
         },
 
         listeners: {
@@ -295,25 +319,29 @@
         },
 
         loadPath: function(event) {
-          this.path = event.model.item.path;
-          Polymer.dom(this.$.thumbnails).innerHTML = "";
-          this.next = false;
-          this._loadAlbums();
-          this._loadPhotos();
+          this._pathLoad(event.model.item.path);
         },
 
         loadAlbum: function(event) {
+          this._pathLoad(event.detail);
+        },
+
+        _pathLoad: function(path) {
+          this.path = path;
           event.preventDefault();
           event.stopPropagation();
           event.stopImmediatePropagation();
-          this.path = event.detail;
+          this.pendingPhotos = [];
+          this.visibleThumbs = [];
+          this.thumbnails = [];
+          this.cursor = null;
           Polymer.dom(this.$.thumbnails).innerHTML = "";
           this.next = false;
+          this.limit = undefined;
           this._loadAlbums();
           this._loadPhotos();
         },
 
-
         onScroll: function(event) {
           if (this.disableScrolling) {
             event.preventDefault();
@@ -571,6 +599,18 @@
             return;
           }
 
+          var i = 0;
+          photos.forEach(function(photo) {
+            var datetime = new Date((photo.taken || photo.modified || photo.added) + " GMT"),
+              year = datetime.getFullYear();
+            for (; i < this.years.length; i++) {
+              if (this.years[i] == year) {
+                return;
+              }
+            }
+            this.push("years", year);
+          }.bind(this));
+
           this.pendingPhotos = this.pendingPhotos.concat(photos);
 
           this.async(this.processItems.bind(this));