diff --git a/viewer/static/css/main.scss b/viewer/static/css/main.scss
index b67b392..9f8bf7e 100644
--- a/viewer/static/css/main.scss
+++ b/viewer/static/css/main.scss
@@ -3,13 +3,12 @@
 @import "./../../../bulma/sass/utilities/initial-variables";
 @import "./../../../bulma/sass/utilities/functions";
 
-$primary: hsl(172, 91%, 60%);
+$primary: hsl(163, 100%, 49%);
 $link: hsl(163, 100%, 49%);
 $link-hover: findDarkColor($link);
 $body-background-color: $black-bis;
-//$background: #0a556d;
-//$code-background: #bcf6ff;
-//$code: #033343;
+$code-background: $grey-darker;
+$code: $link;
 
 $card-header-color: $link;
 $panel-heading-background-color: $black-ter;
@@ -20,6 +19,12 @@ $text-strong: hsl(0, 0%, 90%);
 // Dark Mode
 $scheme-main: $black;
 $scheme-invert: $white;
+$border: rgba($link, 0.4);
+$navbar-item-hover-background-color: rgba(0, 0, 0, 0);
+$panel-block-color: lighten($link, 50);
+$panel-icon-color: $link;
+$card-footer-border-top: 1px solid transparentize($white, 0.7);
+
 
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');
 @import "./../../../bulma/bulma.sass";
@@ -28,136 +33,64 @@ html, body {
   height: 100%
 }
 
-
-//.panel {
-//  background-color: #0a556d;
-//
-//  .panel-heading {
-//    background-color: #17a0cd;
-//    color: white;
-//  }
-//}
-
-//.card {
-//  background-color: #0a556d;
-//  color: white;
-//
-//  .card-header {
-//    background-color: #17a0cd;
-//  }
-//
-//  .card-footer {
-//    border-top-color: rgba(207, 245, 255, 0.5);
-//
-//    .card-footer-item {
-//      background-color: #0c6988;
-//
-//      &:not(:last-child) {
-//        border-right-color: rgba(207, 245, 255, 0.5);
-//      }
-//    }
-//  }
-//}
-
+// Can't figure out how to color panel bottom border with variables
 .panel-block:not(:last-child), .panel-tabs:not(:last-child) {
-  border-bottom-color: #0b87ac;
-}
-
-.tag:not(body).is-info {
-  background-color: #37a0bf;
-}
-
-//.panel-block a {
-//  color: #ffffff;
-//}
-//
-//.panel-icon, .icon {
-//  color: #11a3cf;
-//
-//  a {
-//
-//  }
-//}
-
-.icon a {
-  /*color: inherit;*/
+  border-bottom-color: rgba($link, 0.4);
 }
 
 .navbar {
-  //background-color: #0c5167;
-  //color: white;
   font-family: 'Open Sans', sans-serif;
 
+  // Make navbar brand title stand out
   .navbar-brand .navbar-item {
-    //color: white;
     font-size: 150%;
-    font-weight: 700;
-
-    &:focus, &:hover {
-      text-decoration: none;
-      //color: inherit;
-    }
+    font-weight: 600;
   }
 }
 
-
-.navbar-link.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, a.navbar-item.is-active, a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover {
-  background-color: inherit;
-  //color: inherit;
-}
-
-
-//a {
-//  color: #38c8f8;
-//
-//  &:hover {
-//    color: #a4e6ff;
-//  }
-//}
-
-.checkbox {
-  //color: white;
-}
-
-.checkbox:hover {
-  //color: #a4e6ff;
-}
-
-a.card-footer-item {
-  //color: #c9f2ff;
-}
-
-a.card-footer-item:hover {
-  //color: white;
-}
-
-.navbar-item, p, .label, .card-header-title {
-  //color: white;
-}
-
-//.media + .media {
-//  border-top-color: rgba(164, 230, 255, 0.5);
-//}
-
 #browse.card .card-content {
   padding: 0;
 }
 
-.content .media {
-  padding: 0 0.5rem;
-}
+.card .media {
+  // Cancel out Bulma css
+  &:not(:last-child) {
+    margin-bottom: 0;
+  }
 
-.card .media:not(:last-child) {
   margin: 0;
-  padding: 1rem 0;
+  padding: 1rem;
 }
 
+.panel-icon {
+  margin-right: 1em;
+}
+
+// Decrease tag size a bit
+.tag:not(body) {
+  font-size: 0.7rem;
+  line-height: 1.3;
+  padding: 0 0.6em;
+}
+
+// Vertically center all icons
 .icon {
   vertical-align: middle;
 }
 
-.delete-icon {
-  text-align: right;
-  float: right;
-  display: inline-block;
+.media {
+  width: 100%;
+
+  b, span, a, p {
+    padding: 0 3px;
+  }
+
+  .media-filename {
+    text-decoration: underline;
+    text-decoration-color: lighten($link, 15%);
+  }
+
+  .media-fileid {
+    color: $link;
+  }
 }
diff --git a/viewer/templates/browse.html b/viewer/templates/browse.html
index 7abae09..016d86e 100644
--- a/viewer/templates/browse.html
+++ b/viewer/templates/browse.html
@@ -2,23 +2,6 @@
 {% block head %}
     {{ block.super }}
     <style>
-        .media {
-            width: 100%;
-        }
-
-        .media b, span, a, p {
-            padding: 0 3px;
-        }
-
-        .media .media-filename {
-            text-decoration: underline;
-            text-decoration-color: #3273dc;
-        }
-
-        .media .media-fileid {
-            color: #9ee8ff;
-        }
-
         .flex-container {
             display: flex;
             flex-direction: row;
@@ -46,10 +29,6 @@
             align-self: auto;
         }
 
-        .directory-info {
-            white-space: nowrap;
-        }
-
         .file-count {
             font-weight: 400; font-style: italic; font-size: 70%;
         }
@@ -64,14 +43,6 @@
             align-items: center;
             padding: 0 0.5rem;
         }
-
-        .card .icon a {
-            color: #c4edff;
-        }
-
-        .card .icon a:hover {
-            color: #ffffff;
-        }
     </style>
 {% endblock head %}
 {% block content %}
diff --git a/viewer/templates/delete.html b/viewer/templates/delete.html
index 0a186aa..c4e7e89 100644
--- a/viewer/templates/delete.html
+++ b/viewer/templates/delete.html
@@ -27,9 +27,8 @@
             <div class="content">
                 <p>
                     Are you sure you want to remove this directory from the file server?
-                    <br>
                     {% load humanize %}
-                    <a href="{% url 'browse' directory.id %}"><code>{{ directory.path }}</code></a> contains {{ num_files|intcomma }} files.
+                    <a href="{% url 'browse' directory.id %}"><code>{{ directory.path }}</code></a> contains <b class="has-text-primary">{{ num_files|intcomma }}</b> files.
                 </p>
             </div>
         </div>
diff --git a/viewer/templates/index.html b/viewer/templates/index.html
index c346310..ec03608 100644
--- a/viewer/templates/index.html
+++ b/viewer/templates/index.html
@@ -1,31 +1,17 @@
 {% extends 'base.html' %}
-{% block head %}
-    {{ block.super }}
-    <style>
-        .panel-icon {
-            margin-right: 1em;
-        }
-
-        .tag:not(body) {
-            font-size: 0.7rem;
-            line-height: 1.3;
-            padding: 0 0.6em;
-        }
-    </style>
-{% endblock head %}
 {% block content %}
     <div class="panel">
         <div class="panel-heading">Directories</div>
         {% if directories|length > 0 %}
             {% for served_directory in directories %}
-                <div class="panel-block">
-                    <span class="panel-icon">
+                <div class="panel-block is-flex">
+                    <span class="panel-icon is-align-self-flex-start">
                         <i class="fas fa-folder fa-lg" aria-hidden="true"></i>
                     </span>
-                    <a href="{% url 'browse' served_directory.id %}">
+                    <a href="{% url 'browse' served_directory.id %}" class="is-align-self-flex-end">
                         {{ served_directory.path }}
                         {% if served_directory.regex %}
-                            <span class="tag is-info">Filtered</span>
+                            <span class="tag is-primary">Filtered</span>
                         {% endif %}
                     </a>
                     <a href="{% url 'delete' served_directory.id %}">