diff --git a/frontend/styles.css b/frontend/styles.css
index ad6f6553..e7d7fd56 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -13,10 +13,10 @@
   }
 
   body {
-    @apply font-sans text-slate dark:text-white;
+    @apply font-sans text-slate dark:text-offwhite;
   }
   h1 {
-    @apply text-6xl;
+    @apply text-6xl dark:text-white;
     @apply mb-3;
   }
   h2 {
@@ -25,13 +25,13 @@
     @apply my-5;
   }
   h3 {
-    @apply text-2xl;
+    @apply text-2xl dark:text-white;
   }
   h4 {
-    @apply text-xl;
+    @apply text-xl dark:text-white;
   }
   h5 {
-    @apply text-base
+    @apply text-base dark:text-white;
   }
   p {
     @apply py-5;
@@ -84,7 +84,7 @@
   }
 
   section.content {
-    @apply p-6 mb-4 w-full bg-white rounded-lg shadow-lg md:flex  dark:text-white truncate text-slate dark:bg-charcoal;
+    @apply p-6 mb-4 w-full bg-white rounded-lg shadow-lg md:flex  dark:text-offwhite truncate text-slate dark:bg-charcoal;
   }
 
   select.dropdown {
@@ -92,7 +92,7 @@
   }
 
   .errorlist {
-    @apply bg-red-300 py-2 px-3 rounded text-white;
+    @apply bg-red-400 py-2 px-3 rounded text-white;
   }
 
   /* STYLES FOR THE LIBRARY README
@@ -147,7 +147,7 @@
     @apply bg-transparent;
   }
   #libraryReadMe a {
-    @apply text-sky-600;
+    @apply text-sky-600 dark:text-sky-400;
   }
 
   #libraryReadMe a img {
@@ -155,12 +155,23 @@
   }
 
   code,
+  tt,
   kbd,
   samp,
   pre {
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     /* 1 */
-    @apply text-sm bg-gray-200 dark:bg-black overflow-x-scroll;
+    @apply text-sm text-sky-800 dark:text-sky-200 overflow-x-scroll;
     /* 2 */
   }
 }
+
+.nav-shadow {
+    box-shadow: 0px 1px 0px #d1d1d1;
+    border-bottom: 1px solid #f6f6f6;
+  }
+
+.dark .nav-shadow {
+  border-bottom: 1px solid #07405f;
+  box-shadow: 0 1px 0 #000;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 8c4ba26f..611ea4ec 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,6 +8,7 @@ module.exports = {
       transparent: 'transparent',
       current: 'currentColor',
       white: colors.white,
+      offwhite: '#E6E6E6',
       emerald: colors.emerald,
       gray: colors.gray,
       indigo: colors.indigo,
diff --git a/templates/includes/_header.html b/templates/includes/_header.html
index edbf9c27..6f57bbda 100644
--- a/templates/includes/_header.html
+++ b/templates/includes/_header.html
@@ -6,15 +6,15 @@
 
   <div class="relative mx-auto">
     <div id="navbar-container" class="max-w-7xl md:px-6 mx-auto" x-data="searchToggleComponent" @resize.window="updateSearchButtonLocation()">
-      <div id="headblock" class="hidden items-center py-1 px-2 border-b-2 border-gray-300 md:flex dark:border-charcoal">
-        <div class="w-[100px] h-[25px] -mt-[3px]">
+      <div id="headblock" class="hidden items-center py-1 px-2 nav-shadow md:flex">
+        <div class="w-[40px] h-[25px] -mt-[3px]">
           <a href="{% url 'home' %}" class="inline-block">
               <img class="hidden w-auto dark:inline-block h-[25px]"
-                   src="{% static 'img/Boost_Brandmark_WhiteBoost_Transparent.svg' %}"
+                   src="{% static 'img/Boost_Symbol_Transparent.svg' %}"
                    alt="Boost">
 
               <img class="inline-block w-auto dark:hidden h-[25px]"
-                   src="{% static 'img/Boost_Brandmark_BlackBoost_Transparent.svg' %}"
+                   src="{% static 'img/Boost_Symbol_Transparent.svg' %}"
                    alt="Boost">
           </a>
         </div>