diff --git a/viewer/static/css/main.scss b/viewer/static/css/main.scss
index 68a4c5e..b67b392 100644
--- a/viewer/static/css/main.scss
+++ b/viewer/static/css/main.scss
@@ -1,9 +1,25 @@
 @charset "utf-8";
 
-$body-background-color: #92e1ff;
-$background: #0a556d;
-$code-background: #bcf6ff;
-$code: #033343;
+@import "./../../../bulma/sass/utilities/initial-variables";
+@import "./../../../bulma/sass/utilities/functions";
+
+$primary: hsl(172, 91%, 60%);
+$link: hsl(163, 100%, 49%);
+$link-hover: findDarkColor($link);
+$body-background-color: $black-bis;
+//$background: #0a556d;
+//$code-background: #bcf6ff;
+//$code: #033343;
+
+$card-header-color: $link;
+$panel-heading-background-color: $black-ter;
+$panel-shadow: hsla(172, 91%, 60%, 0.02);
+$text: hsl(0, 0%, 70%);
+$text-strong: hsl(0, 0%, 90%);
+
+// Dark Mode
+$scheme-main: $black;
+$scheme-invert: $white;
 
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');
 @import "./../../../bulma/bulma.sass";
@@ -13,14 +29,35 @@ html, body {
 }
 
 
-.panel {
-  background-color: #0a556d;
+//.panel {
+//  background-color: #0a556d;
+//
+//  .panel-heading {
+//    background-color: #17a0cd;
+//    color: white;
+//  }
+//}
 
-  .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);
+//      }
+//    }
+//  }
+//}
 
 .panel-block:not(:last-child), .panel-tabs:not(:last-child) {
   border-bottom-color: #0b87ac;
@@ -30,35 +67,35 @@ html, body {
   background-color: #37a0bf;
 }
 
-.panel-block a {
-  color: #ffffff;
-}
-
-.panel-icon, .icon {
-  color: #11a3cf;
-
-  a {
-
-  }
-}
+//.panel-block a {
+//  color: #ffffff;
+//}
+//
+//.panel-icon, .icon {
+//  color: #11a3cf;
+//
+//  a {
+//
+//  }
+//}
 
 .icon a {
   /*color: inherit;*/
 }
 
 .navbar {
-  background-color: #0c5167;
-  color: white;
+  //background-color: #0c5167;
+  //color: white;
   font-family: 'Open Sans', sans-serif;
 
   .navbar-brand .navbar-item {
-    color: white;
+    //color: white;
     font-size: 150%;
     font-weight: 700;
 
     &:focus, &:hover {
       text-decoration: none;
-      color: inherit;
+      //color: inherit;
     }
   }
 }
@@ -66,62 +103,41 @@ html, body {
 
 .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;
+  //color: inherit;
 }
 
 
-.card-header {
-  background-color: #17a0cd;
-}
-
-.card {
-  background-color: #0a556d;
-  color: white;
-
-  .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);
-      }
-    }
-  }
-}
-
-a {
-  color: #38c8f8;
-
-  &:hover {
-    color: #a4e6ff;
-  }
-}
+//a {
+//  color: #38c8f8;
+//
+//  &:hover {
+//    color: #a4e6ff;
+//  }
+//}
 
 .checkbox {
-  color: white;
+  //color: white;
 }
 
 .checkbox:hover {
-  color: #a4e6ff;
+  //color: #a4e6ff;
 }
 
 a.card-footer-item {
-  color: #c9f2ff;
+  //color: #c9f2ff;
 }
 
 a.card-footer-item:hover {
-  color: white;
+  //color: white;
 }
 
 .navbar-item, p, .label, .card-header-title {
-  color: white;
+  //color: white;
 }
 
-.media + .media {
-  border-top-color: rgba(164, 230, 255, 0.5);
-}
+//.media + .media {
+//  border-top-color: rgba(164, 230, 255, 0.5);
+//}
 
 #browse.card .card-content {
   padding: 0;
@@ -145,11 +161,3 @@ a.card-footer-item:hover {
   float: right;
   display: inline-block;
 }
-
-.delete-icon .icon {
-  color: #d63b3b;
-}
-
-.image-placeholder img {
-  background-color: #17a0cd;
-}
diff --git a/viewer/templates/add.html b/viewer/templates/add.html
index f5d8de9..cc161de 100644
--- a/viewer/templates/add.html
+++ b/viewer/templates/add.html
@@ -2,9 +2,9 @@
 {% block content %}
     <div class="card">
         <header class="card-header">
-            <p class="card-header-title">
+            <h3 class="card-header-title">
                 Add New Directory
-            </p>
+            </h3>
         </header>
         <div class="card-content">
             <div class="content">
diff --git a/viewer/templates/base.html b/viewer/templates/base.html
index f77864f..1fddee5 100644
--- a/viewer/templates/base.html
+++ b/viewer/templates/base.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
     <head>
         {% block head %}
             <meta charset="utf-8">
@@ -12,9 +12,9 @@
     <body class="has-navbar-fixed-top">
         <nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
             <div class="navbar-brand">
-                <a class="navbar-item" href="/">
-                    Simple Viewer
-                </a>
+                <h1 class="navbar-item">
+                    <a href="/">Simple Viewer</a>
+                </h1>
             </div>
             <div class="navbar-menu">
                 <div class="navbar-start">
diff --git a/viewer/templates/index.html b/viewer/templates/index.html
index 4538943..c346310 100644
--- a/viewer/templates/index.html
+++ b/viewer/templates/index.html
@@ -16,23 +16,31 @@
 {% block content %}
     <div class="panel">
         <div class="panel-heading">Directories</div>
-        {% for served_directory in directories %}
-            <div class="panel-block">
-                <span class="panel-icon">
-                    <i class="fas fa-folder fa-lg" aria-hidden="true"></i>
-                </span>
-                <a href="{% url 'browse' served_directory.id %}">
-                    {{ served_directory.path }}
-                    {% if served_directory.regex %}
-                        <span class="tag is-info">Filtered</span>
-                    {% endif %}
-                </a>
-                <a href="{% url 'delete' served_directory.id %}" class="delete-icon">
-                    <span class="icon">
-                        <i class="fas fa-times fa-lg" aria-hidden="true"></i>
+        {% if directories|length > 0 %}
+            {% for served_directory in directories %}
+                <div class="panel-block">
+                    <span class="panel-icon">
+                        <i class="fas fa-folder fa-lg" aria-hidden="true"></i>
                     </span>
-                </a>
+                    <a href="{% url 'browse' served_directory.id %}">
+                        {{ served_directory.path }}
+                        {% if served_directory.regex %}
+                            <span class="tag is-info">Filtered</span>
+                        {% endif %}
+                    </a>
+                    <a href="{% url 'delete' served_directory.id %}">
+                        <span class="icon has-text-danger">
+                            <i class="fas fa-times fa-lg" aria-hidden="true"></i>
+                        </span>
+                    </a>
+                </div>
+            {% endfor %}
+        {% else %}
+            <div class="panel-block">
+                <p>
+                    No directories available.
+                </p>
             </div>
-        {% endfor %}
+        {% endif %}
     </div>
 {% endblock content %}