diff --git a/web/renderer/components/DatabaseTableNav/NavLinks.tsx b/web/renderer/components/DatabaseTableNav/NavLinks.tsx
index 1e7dd71d..f41c3f64 100644
--- a/web/renderer/components/DatabaseTableNav/NavLinks.tsx
+++ b/web/renderer/components/DatabaseTableNav/NavLinks.tsx
@@ -23,7 +23,12 @@ export default function NavLinks({ className, params }: Props) {
       <Tabs initialActiveIndex={initialActiveIndex}>
         <TabList className={css.tabList}>
           {tabs.map((tab, i) => (
-            <Tab key={tab} name={tab.toLowerCase()} index={i} dark>
+            <Tab
+              key={tab}
+              name={tab.toLowerCase()}
+              index={i}
+              className={css.tab}
+            >
               {tab}
             </Tab>
           ))}
diff --git a/web/renderer/components/DatabaseTableNav/index.module.css b/web/renderer/components/DatabaseTableNav/index.module.css
index 9fc1ab18..4eec5e80 100644
--- a/web/renderer/components/DatabaseTableNav/index.module.css
+++ b/web/renderer/components/DatabaseTableNav/index.module.css
@@ -1,7 +1,7 @@
 .container {
   @apply hidden;
   @screen lg {
-    @apply bg-stone-50 pt-5 flex flex-col;
+    @apply bg-storm-500 pt-5 flex flex-col;
   }
 }
 
@@ -36,7 +36,7 @@
 .menuIcon {
   @apply hidden;
   @screen lg {
-    @apply block text-primary cursor-pointer mx-1;
+    @apply block cursor-pointer mx-1 text-white;
   }
 }
 
@@ -68,7 +68,7 @@
   @apply hidden;
 
   @screen lg {
-    @apply block font-bold text-xl cursor-pointer -ml-4;
+    @apply block font-bold text-xl cursor-pointer -ml-4 text-white;
     path {
       @apply stroke-[3.5rem];
     }
@@ -87,10 +87,14 @@
   @apply text-sm;
 
   li {
-    @apply mx-4 px-2 text-link-1;
+    @apply mx-4 px-2;
   }
 }
 
+.tab {
+  @apply text-storm-50;
+}
+
 .tabPanel {
   @apply px-0 absolute left-0 right-0 bottom-0 top-9 overflow-auto;
 }
diff --git a/web/renderer/components/DefinitionList/index.module.css b/web/renderer/components/DefinitionList/index.module.css
index cc245450..978b7a5e 100644
--- a/web/renderer/components/DefinitionList/index.module.css
+++ b/web/renderer/components/DefinitionList/index.module.css
@@ -2,16 +2,16 @@
   @apply mb-10;
 
   h4 {
-    @apply mx-3 mb-1.5 mt-3 text-base;
+    @apply mx-3 mb-1.5 mt-3 text-base text-storm-50;
   }
 }
 
 .text {
-  @apply mb-5 mt-2 mx-5;
+  @apply mb-5 mt-2 mx-5 text-white;
 }
 
 .icon {
-  @apply text-xl mr-2 text-primary rounded-full opacity-25;
+  @apply text-xl mr-2 text-white rounded-full opacity-25;
 }
 
 .item {
@@ -22,11 +22,10 @@
   }
 }
 
-.item:hover .icon {
-  @apply opacity-100;
-
-  &:hover {
-    @apply text-sky-900;
+.item:hover {
+  .icon,
+  .name {
+    @apply text-sky-900  opacity-100;
   }
 }
 
@@ -40,11 +39,11 @@
 
 .selected,
 .item:hover {
-  @apply bg-white text-link-2;
+  @apply bg-storm-200 text-link-2;
 }
 
 .name {
-  @apply text-link-1 text-sm font-semibold;
+  @apply text-white text-sm font-semibold;
 }
 
 .viewing {
diff --git a/web/renderer/components/TableList/Item/index.module.css b/web/renderer/components/TableList/Item/index.module.css
index 055dedd5..243f894b 100644
--- a/web/renderer/components/TableList/Item/index.module.css
+++ b/web/renderer/components/TableList/Item/index.module.css
@@ -3,7 +3,7 @@
 }
 
 .buttonIcon {
-  @apply text-primary opacity-25 text-2xl mr-4 h-6 mt-1 rounded-full;
+  @apply text-white text-2xl mr-4 h-6 mt-1 rounded-full font-normal;
 
   &:focus {
     @apply widget-shadow-lightblue outline-none;
@@ -12,7 +12,7 @@
 
 .active,
 .item:hover {
-  @apply bg-white;
+  @apply bg-storm-50 text-storm-600;
 
   .buttonIcon {
     @apply font-semibold;
@@ -20,35 +20,43 @@
 }
 
 .item:hover .buttonIcon {
-  @apply opacity-100;
+  @apply text-sky-900;
+}
 
-  &:hover {
+.isExpanded {
+  @apply bg-[#fafbfc];
+  .buttonIcon {
     @apply text-sky-900;
   }
 }
 
-.isExpanded {
-  background-color: #fafbfc;
+.isExpanded .tableName {
+  @apply text-storm-600 font-semibold;
 }
 
+.isExpanded .table {
+  @apply text-storm-600 font-semibold bg-storm-50;
+}
 .table {
   @apply flex justify-between text-sm;
+  &:hover {
+    @apply bg-storm-50;
+    .tableName {
+      @apply text-storm-600;
+    }
+  }
 }
 
 .tableName {
   @apply hidden;
 
   @screen lg {
-    @apply flex p-3 text-link-1 font-semibold w-full text-sm;
+    @apply flex p-3 text-white w-full text-sm;
 
     svg {
       @apply inline-block text-sm mt-1 mr-2;
     }
 
-    &:hover {
-      @apply text-link-2;
-    }
-
     &:focus {
       @apply outline-none;
 
diff --git a/web/renderer/components/TableList/index.module.css b/web/renderer/components/TableList/index.module.css
index 0ca36080..6c2752ff 100644
--- a/web/renderer/components/TableList/index.module.css
+++ b/web/renderer/components/TableList/index.module.css
@@ -1,10 +1,10 @@
 .addTable {
   @apply hidden;
   @screen lg {
-    @apply flex my-8 mx-3 text-sm text-sky-900;
+    @apply flex my-8 mx-3 text-sm text-white;
 
     &:hover {
-      @apply text-link-2;
+      @apply text-sky-300;
     }
 
     svg {
diff --git a/web/renderer/components/Views/index.module.css b/web/renderer/components/Views/index.module.css
index 543ce9c5..6a344c8c 100644
--- a/web/renderer/components/Views/index.module.css
+++ b/web/renderer/components/Views/index.module.css
@@ -3,7 +3,13 @@
 }
 
 .text {
-  @apply my-4 mx-5;
+  @apply my-4 mx-5 text-storm-50;
+  a {
+    @apply text-white;
+    &:hover {
+      @apply text-sky-300;
+    }
+  }
 }
 
 .icon {