diff --git a/package.json b/package.json
index d0d415c4..d6ab91ce 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "build": "ng build",
     "build:stage": "ng build -c staging",
     "build:prod": "ng build -c production",
-    "test": "ng test",
+    "test": "ng test --browsers=ChromeHeadless",
     "test:codecov": "ng test --watch=false --browsers=ChromeHeadless --code-coverage",
     "lint": "ng lint",
     "lint:fix": "ng lint --fix",
@@ -34,7 +34,7 @@
     "angular2-uuid": "1.1.1",
     "components-font-awesome": "4.7.0",
     "core-js": "2.6.12",
-    "countries-list": "^3.0.5",
+    "countries-list": "3.0.5",
     "jsonapi-datastore": "0.4.0-beta",
     "lodash": "^4.17.21",
     "ng2-ace-editor": "0.3.9",
diff --git a/src/app/components/resources/resources.component.ts b/src/app/components/resources/resources.component.ts
index 87666dde..04f36241 100644
--- a/src/app/components/resources/resources.component.ts
+++ b/src/app/components/resources/resources.component.ts
@@ -23,6 +23,7 @@ export class ResourcesComponent implements OnInit {
   systems: System[];
 
   showInstructions = false;
+  showFilters = false;
   loadingResources = false;
   loadingLanguages = false;
   errorMessage: string;
diff --git a/src/styles.css b/src/styles.css
index 63276190..49891ff7 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -6,7 +6,6 @@
   max-height: 500px;
   overflow-y: auto;
 }
-
 /* .card with scroll */
 .card.autoScroll {
   max-height: 500px;
@@ -21,46 +20,134 @@
 
 /* Tooltip */
 .tooltip {
-  display:inline-block;
-  position:relative;
-  border-bottom:1px dotted #666;
-  text-align:left;
+  display: inline-block;
+  position: relative;
+  border-bottom: 1px dotted #666;
+  text-align: left;
 }
 
-.tooltip h3 {margin:12px 0;}
+.tooltip h3 {
+  margin: 12px 0;
+}
 
 .tooltip .tooltip-content {
-  min-width:200px;
-  max-width:400px;
-  top:-20px;
-  left:50%;
-  transform:translate(-30%,-100%);
-  padding:10px 20px;
-  color:#ffffff;
-  background-color:#009cdc;
-  font-weight:normal;
-  font-size:14px;
-  border-radius:8px;
-  position:absolute;
-  z-index:99999999;
-  box-sizing:border-box;
-  box-shadow:0 1px 8px rgba(0,0,0,0.5);
-  display:none;
+  min-width: 200px;
+  max-width: 400px;
+  top: -20px;
+  left: 50%;
+  transform: translate(-30%, -100%);
+  padding: 10px 20px;
+  color: #ffffff;
+  background-color: #009cdc;
+  font-weight: normal;
+  font-size: 14px;
+  border-radius: 8px;
+  position: absolute;
+  z-index: 99999999;
+  box-sizing: border-box;
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
+  display: none;
 }
 
 .tooltip:hover .tooltip-content {
-  display:block;
+  display: block;
 }
 
 .tooltip .tooltip-content:after {
-  content:'';
-  position:absolute;
-  width:15px;
-  height:15px;
-  left:50%;
-  transform:translate(-50%,-50%) rotate(45deg);
-  background-color:#009cdc;
-  box-shadow:0 1px 8px rgba(0,0,0,0.5);
+  content: '';
+  position: absolute;
+  width: 15px;
+  height: 15px;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  background-color: #009cdc;
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
+}
+/* Filter Sort Bar */
+#filterSortBar {
+  padding: 0 0 0 3px;
+}
+#filterSortBar > div > span {
+  padding-right: 0.75rem;
+  font-size: 0.75rem;
+  float: right;
+  vertical-align: middle;
+  margin: auto 0;
+  font-style: italic;
+  color: #6c757d;
+}
+#filterSortBar .btn-group {
+  vertical-align: inherit;
+}
+#filterSortBar .dropdown-header {
+  padding: 0.3rem 0.5rem;
+  color: #000;
+}
+/* Filter/Sort Button (Within Dropdown Menu) */
+#filterSortBar .dropdown > button {
+  font-size: 0.75rem;
+  border: 0;
+  padding: 0.15rem 0.4rem;
+  background-color: rgba(0, 0, 0, 0);
+  color: #6c757d;
+  margin-right: 5px;
+}
+#filterSortBar .dropdown > button:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+#filterSortBar .dropdown > button:focus {
+  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.05);
+}
+#filterSortBar .dropdown > button:active {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+/* Filter/Sort NavBar Buttons */
+.filter-dropdown-button {
+  cursor: pointer;
+  display: block;
+  width: 100%;
+  padding: 0.25rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border-radius: 0.2rem;
+  clear: both;
+  font-weight: 400;
+  color: #212529;
+  text-align: inherit;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+}
+.filter-dropdown-button:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.filter-dropdown-button:active {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+span.sortLabel {
+  font-size: 0.75rem;
+  color: #6c757d;
+  margin-left: 7px;
+}
+/* Tool Cards */
+.card-header.pointer:hover {
+  cursor: pointer;
+  background-color: rgba(52, 58, 64, 0.9) !important;
+}
+.card-header.pointer:active span.h4 {
+  color: rgba(255, 255, 255, 0.5);
+}
+/* Other */
+#filterBadge {
+  translate: 0 -50%;
+  top: 50%;
+  width: 15px;
+}
+@media (min-width: 576px) {
+  .modal-dialog.modal-lg {
+    max-width: 750px;
+  }
 }
 
 /* Filter Sort Bar */
diff --git a/yarn.lock b/yarn.lock
index 97b88c58..9c4edb21 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2176,7 +2176,7 @@ cosmiconfig@^5.0.0:
     js-yaml "^3.13.1"
     parse-json "^4.0.0"
 
-countries-list@^3.0.5:
+countries-list@3.0.5:
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/countries-list/-/countries-list-3.0.5.tgz#34f2b76dfef5c5f47b0c2e536c0e9b2fb10e16a9"
   integrity sha512-JwaAU/wpoUoZk+6WSaGJL1WDoNCJ2vrQCkHOg/t3qoYIPH6kZ+SGAX3YZukMsKXbX1xkxU34pJOE+xr55O+Sww==