diff --git a/web_service/css/tls-dashboard/styles-dark.css b/web_service/css/tls-dashboard/styles-dark.css
new file mode 100644
index 0000000..cf4e9d5
--- /dev/null
+++ b/web_service/css/tls-dashboard/styles-dark.css
@@ -0,0 +1,265 @@
+/** Common styles **/
+div.row.header > div {
+  padding           : 10px 10px 0;
+}
+div.row.pinned {
+  position          : -webkit-sticky;
+  position          : sticky;
+  top               : -1px;
+  z-index           : 1000;
+}
+div.row.pinned > div {
+  padding-top       : 5px;
+}
+.card-inverse .card-text {
+  color             : #eee;
+}
+.form-group.input-parent {
+  margin-bottom     : 0;
+}
+.form-inline > .form-group {
+  margin-right      : 10px;
+  margin-bottom     : 0;
+}
+.form-inline > .form-group > label {
+  margin-bottom     : 4px;
+}
+/** Dark theme **/
+body {
+  background-color  : #153D63;
+  color             : #ddd;
+}
+.bg-primary {
+  background-color  : #052748;
+  color             : #ddd;
+}
+.card-header {
+  border-bottom     : .0625rem solid #052748;
+  background-color  : #3F668D;
+}
+.card-footer {
+  border-top        : .0625rem solid #052748;
+  background-color  : #3F668D;
+}
+.card-header > .text-muted, .card-footer > .text-muted {
+  color             : #eee;
+}
+
+/** Typeahead stylings **/
+#hostnames, .input-parent, .twitter-typeahead {
+  width             : 100%;
+}
+#hostnames, .twitter-typeahead {
+  background-color  : #ddd;
+}
+.tt-menu {
+  max-height        : 150px;
+  width             : 100%;
+  border-width      : 1px;
+  border-color      : #66afe9;
+  border-style      : solid;
+  background-color  : #ddd;
+  font-size         : 1.25rem;
+  overflow-y        : scroll;
+}
+.tt-suggestion {
+  padding           : .5rem .5rem;
+  text-align        : left;
+  font-size         : 1rem;
+  color             : #666;
+}
+.tt-suggestion:hover {
+  background-color  : #6486A7;
+  color             : #ddd;
+}
+.tt-cursor {
+  background-color  : #6486A7;
+  color             : #ddd;
+}
+
+/** Checkbox styles **/
+.checkbox {
+}
+.checkbox label {
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  padding-left: 5px;
+}
+.checkbox label::before {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  width: 17px;
+  height: 17px;
+  left: 0;
+  margin-left: -20px;
+  margin-top: 3px;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  background-color: #fff;
+  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+}
+.checkbox label::after {
+  display: inline-block;
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  left: 0;
+  top: 0;
+  margin-left: -19px;
+  padding-left: 3px;
+  padding-top: 1px;
+  font-size: 11px;
+  color: #555555;
+}
+.checkbox input[type="checkbox"],
+.checkbox input[type="radio"] {
+  opacity: 0;
+  z-index: 1;
+}
+.checkbox input[type="checkbox"]:focus + label::before,
+.checkbox input[type="radio"]:focus + label::before {
+  outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+.checkbox input[type="checkbox"]:checked + label::after,
+.checkbox input[type="radio"]:checked + label::after {
+  margin-top: 3px;
+  padding-left: 3px;
+  content: "\2713";
+}
+.checkbox input[type="checkbox"]:indeterminate + label::after,
+.checkbox input[type="radio"]:indeterminate + label::after {
+  display: block;
+  content: "";
+  width: 10px;
+  height: 3px;
+  background-color: #555555;
+  border-radius: 2px;
+  margin-left: -16.5px;
+  margin-top: 7px;
+}
+.checkbox input[type="checkbox"]:disabled + label,
+.checkbox input[type="radio"]:disabled + label {
+  opacity: 0.65;
+}
+.checkbox input[type="checkbox"]:disabled + label::before,
+.checkbox input[type="radio"]:disabled + label::before {
+  background-color: #eeeeee;
+  cursor: not-allowed;
+}
+.checkbox.checkbox-circle label::before {
+  border-radius: 50%;
+}
+.checkbox.checkbox-inline {
+  margin-top: 0;
+}
+
+.checkbox-primary input[type="checkbox"]:checked + label::before,
+.checkbox-primary input[type="radio"]:checked + label::before {
+  background-color: #337ab7;
+  border-color: #337ab7;
+}
+.checkbox-primary input[type="checkbox"]:checked + label::after,
+.checkbox-primary input[type="radio"]:checked + label::after {
+  color: #fff;
+}
+
+.checkbox-danger input[type="checkbox"]:checked + label::before,
+.checkbox-danger input[type="radio"]:checked + label::before {
+  background-color: #d9534f;
+  border-color: #d9534f;
+}
+.checkbox-danger input[type="checkbox"]:checked + label::after,
+.checkbox-danger input[type="radio"]:checked + label::after {
+  color: #fff;
+}
+
+.checkbox-info input[type="checkbox"]:checked + label::before,
+.checkbox-info input[type="radio"]:checked + label::before {
+  background-color: #5bc0de;
+  border-color: #5bc0de;
+}
+.checkbox-info input[type="checkbox"]:checked + label::after,
+.checkbox-info input[type="radio"]:checked + label::after {
+  color: #fff;
+}
+
+.checkbox-warning input[type="checkbox"]:checked + label::before,
+.checkbox-warning input[type="radio"]:checked + label::before {
+  background-color: #f0ad4e;
+  border-color: #f0ad4e;
+}
+.checkbox-warning input[type="checkbox"]:checked + label::after,
+.checkbox-warning input[type="radio"]:checked + label::after {
+  color: #fff;
+}
+
+.checkbox-success input[type="checkbox"]:checked + label::before,
+.checkbox-success input[type="radio"]:checked + label::before {
+  background-color: #5cb85c;
+  border-color: #5cb85c;
+}
+.checkbox-success input[type="checkbox"]:checked + label::after,
+.checkbox-success input[type="radio"]:checked + label::after {
+  color: #fff;
+}
+
+.checkbox-primary input[type="checkbox"]:indeterminate + label::before,
+.checkbox-primary input[type="radio"]:indeterminate + label::before {
+  background-color: #337ab7;
+  border-color: #337ab7;
+}
+
+.checkbox-primary input[type="checkbox"]:indeterminate + label::after,
+.checkbox-primary input[type="radio"]:indeterminate + label::after {
+  background-color: #fff;
+}
+
+.checkbox-danger input[type="checkbox"]:indeterminate + label::before,
+.checkbox-danger input[type="radio"]:indeterminate + label::before {
+  background-color: #d9534f;
+  border-color: #d9534f;
+}
+
+.checkbox-danger input[type="checkbox"]:indeterminate + label::after,
+.checkbox-danger input[type="radio"]:indeterminate + label::after {
+  background-color: #fff;
+}
+
+.checkbox-info input[type="checkbox"]:indeterminate + label::before,
+.checkbox-info input[type="radio"]:indeterminate + label::before {
+  background-color: #5bc0de;
+  border-color: #5bc0de;
+}
+
+.checkbox-info input[type="checkbox"]:indeterminate + label::after,
+.checkbox-info input[type="radio"]:indeterminate + label::after {
+  background-color: #fff;
+}
+
+.checkbox-warning input[type="checkbox"]:indeterminate + label::before,
+.checkbox-warning input[type="radio"]:indeterminate + label::before {
+  background-color: #f0ad4e;
+  border-color: #f0ad4e;
+}
+
+.checkbox-warning input[type="checkbox"]:indeterminate + label::after,
+.checkbox-warning input[type="radio"]:indeterminate + label::after {
+  background-color: #fff;
+}
+
+.checkbox-success input[type="checkbox"]:indeterminate + label::before,
+.checkbox-success input[type="radio"]:indeterminate + label::before {
+  background-color: #5cb85c;
+  border-color: #5cb85c;
+}
+
+.checkbox-success input[type="checkbox"]:indeterminate + label::after,
+.checkbox-success input[type="radio"]:indeterminate + label::after {
+  background-color: #fff;
+}
diff --git a/web_service/css/tls-dashboard/styles-light.css b/web_service/css/tls-dashboard/styles-light.css
new file mode 100644
index 0000000..fe1892f
--- /dev/null
+++ b/web_service/css/tls-dashboard/styles-light.css
@@ -0,0 +1,242 @@
+/** Common styles **/
+div.row.header > div {
+  padding           : 10px 10px 0;
+}
+div.row.pinned {
+  position          : -webkit-sticky;
+  position          : sticky;
+  top               : -1px;
+  z-index           : 1000;
+}
+div.row.pinned > div {
+  padding-top       : 5px;
+}
+.card-inverse .card-text {
+  color             : #eee;
+}
+.form-group.input-parent {
+  margin-bottom     : 0;
+}
+.form-inline > .form-group {
+  margin-right      : 10px;
+  margin-bottom     : 0;
+}
+.form-inline > .form-group > label {
+  margin-bottom     : 4px;
+}
+
+/** Typeahead stylings **/
+#hostnames, .input-parent, .twitter-typeahead {
+  width             : 100%;
+}
+.tt-menu {
+  max-height        : 150px;
+  width             : 100%;
+  border-width      : 1px;
+  border-color      : #66afe9;
+  border-style      : solid;
+  background-color  : #fff;
+  font-size         : 1.25rem;
+  overflow-y        : scroll;
+}
+.tt-suggestion {
+  padding           : .5rem .5rem;
+  text-align        : left;
+  font-size         : 1rem;
+  color             : #666;
+}
+.tt-suggestion:hover {
+  background-color  : #6F0300;
+  color             : #eee;
+}
+.tt-cursor {
+  background-color  : #6F0300;
+  color             : #eee;
+}
+
+/** Checkbox styles **/
+.checkbox {
+}
+.checkbox label {
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  padding-left: 5px;
+}
+.checkbox label::before {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  width: 17px;
+  height: 17px;
+  left: 0;
+  margin-left: -20px;
+  margin-top: 3px;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  background-color: #fff;
+  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+}
+.checkbox label::after {
+  display: inline-block;
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  left: 0;
+  top: 0;
+  margin-left: -19px;
+  padding-left: 3px;
+  padding-top: 1px;
+  font-size: 11px;
+  color: #555555;
+}
+.checkbox input[type="checkbox"],
+.checkbox input[type="radio"] {
+  opacity: 0;
+  z-index: 1;
+}
+.checkbox input[type="checkbox"]:focus + label::before,
+.checkbox input[type="radio"]:focus + label::before {
+  outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+.checkbox input[type="checkbox"]:checked + label::after,
+.checkbox input[type="radio"]:checked + label::after {
+  margin-top: 3px;
+  padding-left: 3px;
+  content: "\2713";
+}
+.checkbox input[type="checkbox"]:indeterminate + label::after,
+.checkbox input[type="radio"]:indeterminate + label::after {
+  display: block;
+  content: "";
+  width: 10px;
+  height: 3px;
+  background-color: #555555;
+  border-radius: 2px;
+  margin-left: -16.5px;
+  margin-top: 7px;
+}
+.checkbox input[type="checkbox"]:disabled + label,
+.checkbox input[type="radio"]:disabled + label {
+  opacity: 0.65;
+}
+.checkbox input[type="checkbox"]:disabled + label::before,
+.checkbox input[type="radio"]:disabled + label::before {
+  background-color: #eeeeee;
+  cursor: not-allowed;
+}
+.checkbox.checkbox-circle label::before {
+  border-radius: 50%;
+}
+.checkbox.checkbox-inline {
+  margin-top: 0;
+}
+
+.checkbox-primary input[type="checkbox"]:checked + label::before,
+.checkbox-primary input[type="radio"]:checked + label::before {
+  background-color: #337ab7;
+  border-color: #337ab7;
+}
+.checkbox-primary input[type="checkbox"]:checked + label::after,
+.checkbox-primary input[type="radio"]:checked + label::after {
+  color: #fff;
+}
+
+.checkbox-danger input[type="checkbox"]:checked + label::before,
+.checkbox-danger input[type="radio"]:checked + label::before {
+  background-color: #d9534f;
+  border-color: #d9534f;
+}
+.checkbox-danger input[type="checkbox"]:checked + label::after,
+.checkbox-danger input[type="radio"]:checked + label::after {
+  color: #fff;
+}
+
+.checkbox-info input[type="checkbox"]:checked + label::before,
+.checkbox-info input[type="radio"]:checked + label::before {
+  background-color: #5bc0de;
+  border-color: #5bc0de;
+}
+.checkbox-info input[type="checkbox"]:checked + label::after,
+.checkbox-info input[type="radio"]:checked + label::after {
+  color: #fff;
+}
+
+.checkbox-warning input[type="checkbox"]:checked + label::before,
+.checkbox-warning input[type="radio"]:checked + label::before {
+  background-color: #f0ad4e;
+  border-color: #f0ad4e;
+}
+.checkbox-warning input[type="checkbox"]:checked + label::after,
+.checkbox-warning input[type="radio"]:checked + label::after {
+  color: #fff;
+}
+
+.checkbox-success input[type="checkbox"]:checked + label::before,
+.checkbox-success input[type="radio"]:checked + label::before {
+  background-color: #5cb85c;
+  border-color: #5cb85c;
+}
+.checkbox-success input[type="checkbox"]:checked + label::after,
+.checkbox-success input[type="radio"]:checked + label::after {
+  color: #fff;
+}
+
+.checkbox-primary input[type="checkbox"]:indeterminate + label::before,
+.checkbox-primary input[type="radio"]:indeterminate + label::before {
+  background-color: #337ab7;
+  border-color: #337ab7;
+}
+
+.checkbox-primary input[type="checkbox"]:indeterminate + label::after,
+.checkbox-primary input[type="radio"]:indeterminate + label::after {
+  background-color: #fff;
+}
+
+.checkbox-danger input[type="checkbox"]:indeterminate + label::before,
+.checkbox-danger input[type="radio"]:indeterminate + label::before {
+  background-color: #d9534f;
+  border-color: #d9534f;
+}
+
+.checkbox-danger input[type="checkbox"]:indeterminate + label::after,
+.checkbox-danger input[type="radio"]:indeterminate + label::after {
+  background-color: #fff;
+}
+
+.checkbox-info input[type="checkbox"]:indeterminate + label::before,
+.checkbox-info input[type="radio"]:indeterminate + label::before {
+  background-color: #5bc0de;
+  border-color: #5bc0de;
+}
+
+.checkbox-info input[type="checkbox"]:indeterminate + label::after,
+.checkbox-info input[type="radio"]:indeterminate + label::after {
+  background-color: #fff;
+}
+
+.checkbox-warning input[type="checkbox"]:indeterminate + label::before,
+.checkbox-warning input[type="radio"]:indeterminate + label::before {
+  background-color: #f0ad4e;
+  border-color: #f0ad4e;
+}
+
+.checkbox-warning input[type="checkbox"]:indeterminate + label::after,
+.checkbox-warning input[type="radio"]:indeterminate + label::after {
+  background-color: #fff;
+}
+
+.checkbox-success input[type="checkbox"]:indeterminate + label::before,
+.checkbox-success input[type="radio"]:indeterminate + label::before {
+  background-color: #5cb85c;
+  border-color: #5cb85c;
+}
+
+.checkbox-success input[type="checkbox"]:indeterminate + label::after,
+.checkbox-success input[type="radio"]:indeterminate + label::after {
+  background-color: #fff;
+}
diff --git a/web_service/css/tls-dashboard/styles.css b/web_service/css/tls-dashboard/styles.css
deleted file mode 100644
index 385f13a..0000000
--- a/web_service/css/tls-dashboard/styles.css
+++ /dev/null
@@ -1,37 +0,0 @@
-/** Typeahead stylings **/
-#hostnames, .input-parent, .twitter-typeahead {
-  width: 100%;
-
-}
-.twitter-typeahead {
-}
-.tt-menu {
-  max-height        : 150px;
-    min-width: 325px;
-  border-width      : 1px;
-  border-color      : #66afe9;
-  border-style      : solid;
-  background-color  : #fff;
-  font-size         : 1.25rem;
-  overflow-y        : scroll;
-}
-.tt-suggestion {
-padding           : .5rem .5rem;
-  text-align: left;
-  font-size: 1rem;
-}
-.tt-suggestion:hover {
-  background-color: #1D44C8;
-  color: #eee;
-}
-.tt-cursor {
-  background-color: #1D44C8;
-  color: #eee;
-}
-.form-inline > .form-group {
-  margin-right: 25px;
-  margin-bottom: 0;
-}
-.form-inline > .form-group > label {
-  margin-bottom: 4px;
-}
diff --git a/web_service/index.html b/web_service/index.html
index c04d963..8a21361 100644
--- a/web_service/index.html
+++ b/web_service/index.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css" type="text/css" />
-    <link rel="stylesheet" href="./css/tls-dashboard/styles.css" type="text/css" />
+    <link rel="stylesheet" href="./css/tls-dashboard/styles-dark.css" type="text/css" />
 
     <script src="./js/jquery/jquery-2.2.2.min.js"></script>
     <script src="./js/handlebars/handlebars-v4.0.5.min.js"></script>
@@ -18,57 +18,62 @@
   </head>
   <body>
     <div class="container-fluid">
-      <div class="row">
-        <div class="col-xs-12 text-center bg-primary"><h1>TLS Certificate Expiration Dashboard</h1></div>
-        <div class="col-xs-12 text-center bg-primary"><h3><small>Created: <span id="created_date"></span></small></h3></div>
-      </div>
-      <div class="row" style="margin-top: 1rem;">
-        <div class="col-xs-12">
-          <h4>Filter Results</h4>
+      <div class="row header">
+        <div class="col-xs-12 bg-primary">
+          <h3 >TLS Certificate Expiration Dashboard</h3>
         </div>
       </div>
-      <div class="row">
-        <div class="col-xs-12 col-md-6">
-          <p class="lead">By status:</p>
+      <div class="row pinned bg-primary">
+        <div class="col-xs-12">
+          <h5>Last Updated on <span id="created_date"></span></h5>
+          <div class="form-group input-parent">
+            <input type="text" id="hostnames"
+                    name="hostnames"
+                    class="form-control typeahead"
+                    placeholder="Search for hostname: (e.g. www.example.com)"
+                    autocomplete="off"
+                    tabindex="2">
+          </div>
+        </div>
+        <div class="col-xs-12 hidden-xs-down">
           <div class="form-inline">
             <div class="form-group">
-              <label class="form-check-label">
-                <input type="checkbox" id="response_type_3" value="danger" checked="checked"> Danger
+              <label>Show :</label>
+            </div>
+            <div class="form-group checkbox checkbox-danger">
+              <input type="checkbox" id="response_type_danger" value="danger" checked="checked" class="styled">
+              <label for="response_type_danger">
+                Danger
               </label>
             </div>
-            <div class="form-group">
-              <label class="form-check-label">
-                <input type="checkbox" id="response_type_2" value="warning" checked="checked"> Warning
+            <div class="form-group checkbox checkbox-warning">
+              <input type="checkbox" id="response_type_warning" value="warning" checked="checked" class="styled">
+              <label for="response_type_warning">
+                Warning
               </label>
             </div>
-            <div class="form-group">
-              <label class="form-check-label">
-                <input class="form-check-input" type="checkbox" id="response_type_1" value="normal" checked="checked"> Normal
+            <div class="form-group checkbox checkbox-success">
+              <input type="checkbox" id="response_type_success" value="normal" checked="checked" class="styled">
+              <label for="form-check-response_type_success">
+                Normal
               </label>
             </div>
-            <div class="form-group">
-              <label class="form-check-label">
-                <input type="checkbox" id="response_type_4" value="info" checked="checked"> Info
+            <div class="form-group checkbox checkbox-info">
+              <input type="checkbox" id="response_type_info" value="info" checked="checked" class="styled">
+              <label for="response_type_info">
+                Info
               </label>
             </div>
-            <div class="form-group">
-              <label class="form-check-label">
-                <input type="checkbox" id="response_type_5" value="error" checked="checked"> Error
+            <div class="form-group checkbox checkbox-info">
+              <input type="checkbox" id="response_type_error" value="error" checked="checked" class="styled">
+              <label for="response_type_error">
+                Error
               </label>
             </div>
           </div>
         </div>
-        <div class="col-xs-12 col-md-6">
-          <p class="lead">By hostname:</p>
-            <div class="form-group input-parent">
-              <input type="text" id="hostnames"
-                      name="hostnames"
-                      class="form-control typeahead"
-                      placeholder="www.example.com"
-                      autocomplete="off"
-                      tabindex="2">
-            </div>
-          </div>
+      </div>
+      <div class="row">
       </div>
       <div class="row" style="margin-top: 1rem;">
         <div class="col-xs-12">