diff --git a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html
index 7179005..d42ab9f 100644
--- a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html
+++ b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html
@@ -50,7 +50,7 @@
     <!-- Home page > All User List -->
     <div class="col-md-10 col-md-offset-1">
         <div class="row">
-            <div class="col-xs-8">
+            <div class="col-md-6">
                 <form class="input-group" action="#users" method="get">
                     <span class="input-group-btn">
                         <button class="btn btn-default" type="submit">Go!</button>
@@ -58,19 +58,21 @@
                     <input type="text" class="form-control" placeholder="Search for..." name="query" data-bind="value: Query">
                 </form>
             </div>
-            <div class="dropdown col-xs-2" data-bind="with: $root.groupsList">
+            <div class="dropdown col-md-2" data-bind="with: $root.groupsList">
                 <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                     Group Filter
                     <span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu">
                     <!-- ko foreach: Groups -->
-                    <li data-bind="css:{disabled:$root.userList().GroupFilter.Name===Name}">
+                    <li data-bind="css:{disabled:$root.getCurrentGroupFilter()===Name}">
                         <a data-bind="click: function(){$root.groupFilter(Id);}, text: Name"></a>
                     </li>
                     <!-- /ko -->
                 </ul>
             </div>
+            <button class="btn btn-default col-md-2" 
+                    data-bind="click: $root.clearGroupFilter, enable: ($root.hasGroupFilter() || $root.hasQuery())">Clear Filter</button>
             <button class="btn btn-default pull-right" data-bind="click: $root.returnButtonClick" 
                     pagedestination="newUser"><span class="glyphicon glyphicon-plus"></span> Add New User</button>
         </div>
diff --git a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/spa.js b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/spa.js
index 754e578..ae8cf12 100644
--- a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/spa.js
+++ b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/spa.js
@@ -183,6 +183,30 @@
             self.setPagination(self.userList().PageSize, data);
         }
     };
+    self.getCurrentGroupFilter = function() {
+        if (self.userList() !== null) {
+            if (self.userList().GroupFilter !== null) {
+                return self.userList().GroupFilter.Name;
+            }
+        }
+        return "";
+    };
+    self.clearGroupFilter = function () {
+        self.setPagination(20, 1);
+    };
+    self.hasGroupFilter = function() {
+        if(self.userList() !== null)
+            if (self.userList().GroupFilter)
+                return true;
+        return false;
+    };
+    self.hasQuery = function() {
+        if (self.userList() !== null) {
+            if (self.userList().Query && self.userList().Query !== "")
+                return true;
+        }
+        return false;
+    };
     self.groupFilter = function(data) {
         console.log("filter by group: " + data);
         var args = [
@@ -374,7 +398,7 @@
             self.getGroups(function (data) { self.groupsList(data); });
             if (query)
                 self.searchUsers(query);
-            else if (groupId !== -1)
+            else if (groupId && groupId > 0)
                 self.getUserList(null, null, groupId);
             else
                 self.getUserList(pageSize, pageNumber);