diff --git a/public/templates/directives/paged-tracks-list.html b/public/templates/directives/paged-tracks-list.html
index b9dbce61..245bfa45 100644
--- a/public/templates/directives/paged-tracks-list.html
+++ b/public/templates/directives/paged-tracks-list.html
@@ -1,4 +1,18 @@
 <div class="paged-tracks-list">
+    <ul class="dropdowns">
+        <li class="dropdown" ng-class="{'has-filter': !query.filters.archive.isDefault}">
+            <a class="dropdown-toggle btn btn-default" bs-dropdown>
+                Archive: <strong>{{query.filters.archive.title}}</strong>
+            </a>
+            <a class="btn btn-default" pfm-eat-click ng-click="clearFilter('archive')"><i class="fa fa-remove"></i></a>
+            <ul class="dropdown-menu">
+                <li ng-repeat="filter in ::filters.archive.values track by $index" ng-class="{selected: filter == query.filters.archive}">
+                    <a pfm-eat-click href="#" ng-click="setFilter('archive', filter)">{{::filter.title}}</a>
+                </li>
+            </ul>
+        </li>
+    </ul>
+
     <div class="pagination" ng-if="totalPages > 1">
         <ul>
             <li ng-class="{disabled: !prevPage}"><a href="#" ng-click="gotoPage(prevPage);" pfm-eat-click>Prev</a></li>
diff --git a/resources/assets/scripts/app/directives/paged-tracks-list.coffee b/resources/assets/scripts/app/directives/paged-tracks-list.coffee
index 2b9f319c..7ca87606 100644
--- a/resources/assets/scripts/app/directives/paged-tracks-list.coffee
+++ b/resources/assets/scripts/app/directives/paged-tracks-list.coffee
@@ -27,55 +27,81 @@ module.exports = angular.module('ponyfm').directive 'pfmPagedTracksList', () ->
     controller: [
         '$scope', 'tracks', '$state', '$location'
         ($scope, tracks, $state, $location) ->
-            $scope.newClickOverride = (id) ->
-                $scope.clickOverride({id: id})
+            tracks.loadFilters().then(->
+                $scope.filters = tracks.filters
+                $scope.query = tracks.mainQuery
+                tracks.mainQuery.fromFilterString($state.params.filter)
 
-            typeEnum = switch
-                when $scope.type == 'normal' then tracks.FetchType.NORMAL
-                when $scope.type == 'all' then tracks.FetchType.ALL
-                when $scope.type == 'unclassified' then tracks.FetchType.UNCLASSIFIED
-                else tracks.FetchType.NORMAL
+                $scope.toggleListFilter = (filter, id) ->
+                    $scope.query.toggleListFilter filter, id
+                    $state.transitionTo $state.current.name, {filter: $scope.query.toFilterString()}
 
-            tracks.mainQuery.fetch(typeEnum).done (searchResults) ->
-                $scope.tracks = searchResults.tracks
+                $scope.setFilter = (filter, value) ->
+                    $scope.query.setFilter filter, value
+                    $state.transitionTo $state.current.name, {filter: $scope.query.toFilterString()}
 
-                $scope.currentPage = parseInt(searchResults.current_page)
-                $scope.totalPages = parseInt(searchResults.total_pages)
-                delete $scope.nextPage
-                delete $scope.prevPage
+                $scope.setListFilter = (filter, id) ->
+                    $scope.query.setListFilter filter, id
+                    $state.transitionTo $state.current.name, {filter: $scope.query.toFilterString()}
 
-                $scope.nextPage = $scope.currentPage + 1 if $scope.currentPage < $scope.totalPages
-                $scope.prevPage = $scope.currentPage - 1 if $scope.currentPage > 1
-                $scope.allPages = [1..$scope.totalPages]
+                $scope.clearFilter = (filter) ->
+                    $scope.query.clearFilter filter
+                    $state.transitionTo $state.current.name, {filter: $scope.query.toFilterString()}
 
-                # The actual first page will always be in the paginator.
-                $scope.pages = [1]
+                $scope.newClickOverride = (id) ->
+                    $scope.clickOverride({id: id})
 
-                # This logic determines how many pages to add prior to the current page, if any.
-                firstPage = Math.max(2, $scope.currentPage-3)
-                $scope.pages = $scope.pages.concat [firstPage..$scope.currentPage] unless $scope.currentPage == 1
+                tracks.loadFilters().then(
+                    tracks.mainQuery.fromFilterString($state.params.filter)
+                )
 
-                pagesLeftToAdd = 8-$scope.pages.length
+                typeEnum = switch
+                    when $scope.type == 'normal' then tracks.FetchType.NORMAL
+                    when $scope.type == 'all' then tracks.FetchType.ALL
+                    when $scope.type == 'unclassified' then tracks.FetchType.UNCLASSIFIED
+                    else tracks.FetchType.NORMAL
 
-                lastPage = Math.min($scope.totalPages - 1, $scope.currentPage+1+pagesLeftToAdd)
-                $scope.pages = $scope.pages.concat([$scope.currentPage+1..lastPage]) unless $scope.currentPage >= lastPage
+                tracks.mainQuery.fetch(typeEnum).done (searchResults) ->
+                    $scope.tracks = searchResults.tracks
 
-                # The actual last page will always be in the paginator.
-                $scope.pages.push($scope.totalPages) unless $scope.totalPages in $scope.pages
+                    $scope.currentPage = parseInt(searchResults.current_page)
+                    $scope.totalPages = parseInt(searchResults.total_pages)
+                    delete $scope.nextPage
+                    delete $scope.prevPage
 
-            $scope.pageSelectorShown = false
+                    $scope.nextPage = $scope.currentPage + 1 if $scope.currentPage < $scope.totalPages
+                    $scope.prevPage = $scope.currentPage - 1 if $scope.currentPage > 1
+                    $scope.allPages = [1..$scope.totalPages]
 
-            $scope.gotoPage = (page) ->
-                #$scope.$emit 'pageChange', {filter: $state.params.filter, page: page}
-                $state.go '.', {filter: $state.params.filter, page: page}
+                    # The actual first page will always be in the paginator.
+                    $scope.pages = [1]
 
-            $scope.showPageSelector = () ->
-                $scope.pageSelectorShown = true
-                focus('#pagination-jump-destination')
+                    # This logic determines how many pages to add prior to the current page, if any.
+                    firstPage = Math.max(2, $scope.currentPage-3)
+                    $scope.pages = $scope.pages.concat [firstPage..$scope.currentPage] unless $scope.currentPage == 1
+
+                    pagesLeftToAdd = 8-$scope.pages.length
+
+                    lastPage = Math.min($scope.totalPages - 1, $scope.currentPage+1+pagesLeftToAdd)
+                    $scope.pages = $scope.pages.concat([$scope.currentPage+1..lastPage]) unless $scope.currentPage >= lastPage
+
+                    # The actual last page will always be in the paginator.
+                    $scope.pages.push($scope.totalPages) unless $scope.totalPages in $scope.pages
 
-            $scope.hidePageSelector = () ->
                 $scope.pageSelectorShown = false
 
-            $scope.jumpToPage = (inputPageNumber) ->
-                $scope.gotoPage(inputPageNumber)
+                $scope.gotoPage = (page) ->
+                    #$scope.$emit 'pageChange', {filter: $state.params.filter, page: page}
+                    $state.go '.', {filter: $state.params.filter, page: page}
+
+                $scope.showPageSelector = () ->
+                    $scope.pageSelectorShown = true
+                    focus('#pagination-jump-destination')
+
+                $scope.hidePageSelector = () ->
+                    $scope.pageSelectorShown = false
+
+                $scope.jumpToPage = (inputPageNumber) ->
+                    $scope.gotoPage(inputPageNumber)
+            )
     ]