diff --git a/resources/views/tasks/time_tracker.blade.php b/resources/views/tasks/time_tracker.blade.php
index 9945131568a9..7372884ab1a2 100644
--- a/resources/views/tasks/time_tracker.blade.php
+++ b/resources/views/tasks/time_tracker.blade.php
@@ -139,7 +139,7 @@
 
                 <!-- Navbar Filter -->
                 <div class="input-group input-group-lg">
-                    <span class="input-group-addon" style="width:1%;" data-bind="click: onFilterClick" title="{{ trans('texts.filter_sort') }}"><span class="glyphicon glyphicon-filter"></span></span>
+                    <span class="input-group-addon" style="width:1%;" data-bind="click: onFilterClick, style: { 'background-color': filterState() != 'all' ? '#ffffaa'  : '' }" title="{{ trans('texts.filter_sort') }}"><span class="glyphicon glyphicon-filter"></span></span>
                     <input id="search" type="search" class="form-control search" autocomplete="off" autofocus="autofocus"
                         data-bind="event: { focus: onFilterFocus, input: onFilterChanged, keypress: onFilterKeyPress }, value: filter, valueUpdate: 'afterkeydown', attr: {placeholder: placeholder, style: filterStyle, disabled: formChanged }">
 					<span class="input-group-addon" style="width:1%;" data-bind="click: onRefreshClick" title="{{ trans('texts.refresh') }}"><span class="glyphicon glyphicon-repeat"></span></span>
@@ -224,10 +224,12 @@
 					<div class="panel-body">
 						<div class="row" xstyle="padding-bottom:22px;">
 							<div class="col-md-12">
-								{!! Former::select('entity_state')
+								{!! Former::select('filter_state')
+										->label('filter')
 								 		->addOption(trans('texts.all'), 'all')
 										->addOption(trans('texts.stopped'), 'stopped')
-										->addOption(trans('texts.running'), 'running') !!}
+										->addOption(trans('texts.running'), 'running')
+										->data_bind('value: filterState') !!}
 							</div>
 						</div>
 						<div class="row">
@@ -237,12 +239,14 @@
 										->addOption(trans('texts.duration'), 'duration')
 										->addOption(trans('texts.client'), 'client')
 										->addOption(trans('texts.project'), 'project')
-										->addOption(trans('texts.description'), 'description') !!}
+										->addOption(trans('texts.description'), 'description')
+										->data_bind('value: sortBy') !!}
 							</div>
 							<div class="col-md-6" style="padding-top:24px;">
 								{!! Former::select('direction')
 										->addOption(trans('texts.ascending'), 'asc')
-										->addOption(trans('texts.descending'), 'desc') !!}
+										->addOption(trans('texts.descending'), 'desc')
+										->data_bind('value: sortDirection') !!}
 							</div>
 						</div>
 					</div>
diff --git a/resources/views/tasks/time_tracker_knockout.blade.php b/resources/views/tasks/time_tracker_knockout.blade.php
index f8fc38953cdb..a1313febcfa9 100644
--- a/resources/views/tasks/time_tracker_knockout.blade.php
+++ b/resources/views/tasks/time_tracker_knockout.blade.php
@@ -13,6 +13,10 @@
         self.selectedClient = ko.observable(false);
         self.selectedProject = ko.observable(false);
 
+        self.filterState = ko.observable('all');
+        self.sortBy = ko.observable('date');
+        self.sortDirection = ko.observable('desc');
+
         self.isDesktop = function() {
             return navigator.userAgent == 'Time Tracker';
         }
@@ -320,14 +324,17 @@
 
         self.filteredTasks = ko.computed(function() {
 
-            // filter the data
-            if(! self.filter()) {
-                var tasks = self.tasks();
-            } else {
-                var filtered = ko.utils.arrayFilter(self.tasks(), function(task) {
-                    return task.matchesFilter(self.filter());
-                });
-                var tasks = filtered.length == 0 ? self.tasks() : filtered;
+            var tasks = self.tasks();
+
+            // bind to fields
+            self.filterState();
+
+            var filtered = ko.utils.arrayFilter(tasks, function(task) {
+                return task.matchesFilter();
+            });
+
+            if (! self.filter() || filtered.length > 0) {
+                tasks = filtered;
             }
 
             // sort the data
@@ -588,33 +595,42 @@
             return times;
         }
 
-        self.matchesFilter = function(filter) {
-            filter = filter.toLowerCase();
-            var parts = filter.split(' ');
-            for (var i=0; i<parts.length; i++) {
-                var part = parts[i];
-                var isMatch = false;
-                if (self.description()) {
-                    if (self.description().toLowerCase().indexOf(part) >= 0) {
-                        isMatch = true;
+        self.matchesFilter = function() {
+            if (model.filter()) {
+                filter = model.filter().toLowerCase();
+                var parts = filter.split(' ');
+                for (var i=0; i<parts.length; i++) {
+                    var part = parts[i];
+                    var isMatch = false;
+                    if (self.description()) {
+                        if (self.description().toLowerCase().indexOf(part) >= 0) {
+                            isMatch = true;
+                        }
                     }
-                }
-                if (self.project()) {
-                    var projectName = self.project().name();
-                    if (projectName && projectName.toLowerCase().indexOf(part) >= 0) {
-                        isMatch = true;
+                    if (self.project()) {
+                        var projectName = self.project().name();
+                        if (projectName && projectName.toLowerCase().indexOf(part) >= 0) {
+                            isMatch = true;
+                        }
                     }
-                }
-                if (self.client()) {
-                    var clientName = self.client().displayName();
-                    if (clientName && clientName.toLowerCase().indexOf(part) >= 0) {
-                        isMatch = true;
+                    if (self.client()) {
+                        var clientName = self.client().displayName();
+                        if (clientName && clientName.toLowerCase().indexOf(part) >= 0) {
+                            isMatch = true;
+                        }
+                    }
+                    if (! isMatch) {
+                        return false;
                     }
-                }
-                if (! isMatch) {
-                    return false;
                 }
             }
+
+            if (model.filterState() == 'stopped' && self.isRunning()) {
+                return false;
+            } else if (model.filterState() == 'running' && ! self.isRunning()) {
+                return false;
+            }
+
             return true;
         }