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..2acebb7a 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-8 flex flex-col;
   }
 }
 
@@ -23,20 +23,20 @@
 }
 
 .top {
-  @apply pb-4 -mt-2;
+  @apply pb-4;
 }
 
 .topLine {
   @apply flex justify-between items-center w-full pb-4 px-4;
   @screen lg {
-    @apply px-3;
+    @apply pl-4 pr-3;
   }
 }
 
 .menuIcon {
   @apply hidden;
   @screen lg {
-    @apply block text-primary cursor-pointer mx-1;
+    @apply block cursor-pointer mx-1 text-white;
   }
 }
 
@@ -53,7 +53,7 @@
 }
 
 .createBranch {
-  @apply relative text-base;
+  @apply relative text-base ml-[0.8rem];
 }
 
 .createBranchDisabled a {
@@ -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 border-2 rounded-full border-white;
     path {
       @apply stroke-[3.5rem];
     }
@@ -87,12 +87,28 @@
   @apply text-sm;
 
   li {
-    @apply mx-4 px-2 text-link-1;
+    @apply mx-4 px-2;
   }
 }
 
+.tab {
+  @apply text-storm-50;
+  button {
+    @apply font-normal;
+  }
+}
+
+.active {
+  @apply text-orange-400;
+}
+
 .tabPanel {
   @apply px-0 absolute left-0 right-0 bottom-0 top-9 overflow-auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    @apply hidden;
+  }
 }
 
 .tableNavTrigger {
@@ -111,3 +127,11 @@
     @apply font-semibold;
   }
 }
+
+.schemaSelector {
+  @apply m-0 max-w-none;
+}
+
+.selector {
+  @apply w-[230px] max-w-none;
+}
diff --git a/web/renderer/components/DatabaseTableNav/index.tsx b/web/renderer/components/DatabaseTableNav/index.tsx
index 89dde13a..1b3a1573 100644
--- a/web/renderer/components/DatabaseTableNav/index.tsx
+++ b/web/renderer/components/DatabaseTableNav/index.tsx
@@ -71,16 +71,22 @@ function Nav({
             data-cy="left-nav-toggle-icon"
           />
         </div>
-        {isPostgres && params.refName && (
-          <div
-            className={cx(css.openBranchSelector, { [css.closedItem]: !open })}
-          >
-            <SchemasSelector
-              params={{ ...params, refName: params.refName }}
-              routeRefChangeTo={routeRefChangeTo}
-            />
-          </div>
-        )}
+        <div className={css.topLine}>
+          {isPostgres && params.refName && (
+            <div
+              className={cx(css.openBranchSelector, {
+                [css.closedItem]: !open,
+              })}
+            >
+              <SchemasSelector
+                params={{ ...params, refName: "" }}
+                routeRefChangeTo={routeRefChangeTo}
+                className={css.schemaSelector}
+                selectorClassName={css.selector}
+              />
+            </div>
+          )}
+        </div>
       </div>
       <NavLinks
         className={cx(css.openNav, { [css.closedItem]: !open })}
diff --git a/web/renderer/components/DefinitionList/index.module.css b/web/renderer/components/DefinitionList/index.module.css
index cc245450..769b9df2 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-20;
 }
 
 .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,15 +39,15 @@
 
 .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 {
-  @apply py-0.5 mr-4 text-coral-400 font-semibold text-sm;
+  @apply py-0.5 mr-3 text-coral-400 bg-white rounded-full px-2 font-semibold text-sm;
 }
 
 .smallLoader {
diff --git a/web/renderer/components/FormSelectForRefs/BranchAndTagSelector.tsx b/web/renderer/components/FormSelectForRefs/BranchAndTagSelector.tsx
index b71c9012..e06f91e3 100644
--- a/web/renderer/components/FormSelectForRefs/BranchAndTagSelector.tsx
+++ b/web/renderer/components/FormSelectForRefs/BranchAndTagSelector.tsx
@@ -92,7 +92,7 @@ export default function BranchAndTagSelector(props: Props) {
       className={cx(css.branchAndTagSelect, {
         [css.selectForPostgres]: !!props.isPostgres,
       })}
-      label={props.isPostgres ? "Branch" : undefined}
+      label="Branch:"
       horizontal
       selectedOptionFirst
       light
diff --git a/web/renderer/components/FormSelectForRefs/index.module.css b/web/renderer/components/FormSelectForRefs/index.module.css
index 46f24814..89b45a9c 100644
--- a/web/renderer/components/FormSelectForRefs/index.module.css
+++ b/web/renderer/components/FormSelectForRefs/index.module.css
@@ -3,7 +3,7 @@
 }
 
 .branchAndTagSelect {
-  @apply min-w-[270px] max-w-[270px] w-full;
+  @apply w-[230px];
 }
 
 .selectForPostgres {
@@ -31,7 +31,7 @@
 }
 
 .branchLabel {
-  @apply mt-1.5;
+  @apply mt-2 mr-2 text-storm-50 font-normal text-sm w-[3.3rem];
 }
 
 .doltDisabled {
diff --git a/web/renderer/components/SchemaDiagramButton/index.module.css b/web/renderer/components/SchemaDiagramButton/index.module.css
index 14df9c2c..01efe7bb 100644
--- a/web/renderer/components/SchemaDiagramButton/index.module.css
+++ b/web/renderer/components/SchemaDiagramButton/index.module.css
@@ -1,5 +1,8 @@
 .diagram {
-  @apply flex text-white ml-3 mt-2 text-base;
+  @apply flex text-white text-base bg-[#FF8964] px-6 items-center;
+  &:hover {
+    @apply bg-coral-400;
+  }
 
   svg {
     @apply mt-1 mr-2 text-sm;
diff --git a/web/renderer/components/SchemasSelector/CreateSchema.tsx b/web/renderer/components/SchemasSelector/CreateSchema.tsx
index 1374e414..042930bf 100644
--- a/web/renderer/components/SchemasSelector/CreateSchema.tsx
+++ b/web/renderer/components/SchemasSelector/CreateSchema.tsx
@@ -53,7 +53,7 @@ export default function CreateSchema(props: Props) {
         data-tooltip-content="Create new schema"
         data-tooltip-place="top"
       >
-        <IoAddOutline />
+        <IoAddOutline className={css.createSchIcon} />
       </Button.Link>
       <Tooltip id="create-schema" />
       <ModalOuter
diff --git a/web/renderer/components/SchemasSelector/index.module.css b/web/renderer/components/SchemasSelector/index.module.css
index 55facae1..6ed282d6 100644
--- a/web/renderer/components/SchemasSelector/index.module.css
+++ b/web/renderer/components/SchemasSelector/index.module.css
@@ -7,9 +7,17 @@
 }
 
 .createSch {
-  @apply text-xl ml-2.5 mt-1 font-semibold;
+  @apply text-xl ml-2.5 mt-1 font-semibold text-white;
 
   path {
     @apply stroke-[3.5rem];
   }
 }
+
+.createSchIcon {
+  @apply border-2 rounded-full border-white;
+}
+
+.schemaLabel {
+  @apply mt-2 mr-2 text-storm-50 font-normal text-sm w-[3.3rem];
+}
diff --git a/web/renderer/components/SchemasSelector/index.tsx b/web/renderer/components/SchemasSelector/index.tsx
index 4c895c47..54933cac 100644
--- a/web/renderer/components/SchemasSelector/index.tsx
+++ b/web/renderer/components/SchemasSelector/index.tsx
@@ -7,12 +7,15 @@ import {
 import { RefOptionalSchemaParams } from "@lib/params";
 import { RefUrl, ref } from "@lib/urls";
 import { useRouter } from "next/router";
+import cx from "classnames";
 import CreateSchema from "./CreateSchema";
 import css from "./index.module.css";
 
 type Props = {
   params: RefOptionalSchemaParams & { tableName?: string };
   routeRefChangeTo: RefUrl;
+  className?: string;
+  selectorClassName?: string;
 };
 
 type SelectorProps = {
@@ -33,6 +36,7 @@ export function Selector(props: SelectorProps) {
     <FormSelect
       val={props.val ?? res.data.schemas[0]}
       className={props.className}
+      labelClassName={css.schemaLabel}
       onChangeValue={props.onChangeValue}
       options={res.data.schemas.map(v => {
         return {
@@ -41,7 +45,7 @@ export function Selector(props: SelectorProps) {
         };
       })}
       hideSelectedOptions
-      label="Schema"
+      label="Schema:"
       horizontal={props.horizontal}
       light
     />
@@ -82,12 +86,12 @@ export default function SchemasSelector(props: Props) {
   };
 
   return (
-    <span className={css.wrapper}>
+    <span className={cx(css.wrapper, props.className)}>
       <Selector
         params={props.params}
         val={props.params.schemaName}
         onChangeValue={handleChangeRef}
-        className={css.selector}
+        className={cx(css.selector, props.selectorClassName)}
         horizontal
       />
       <CreateSchema {...props} />
diff --git a/web/renderer/components/TableList/Item/index.module.css b/web/renderer/components/TableList/Item/index.module.css
index 055dedd5..a61b6150 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 hidden text-sky-900 text-2xl mr-4 h-6 mt-1 rounded-full font-normal;
 
   &:focus {
     @apply widget-shadow-lightblue outline-none;
@@ -12,43 +12,48 @@
 
 .active,
 .item:hover {
-  @apply bg-white;
-
-  .buttonIcon {
-    @apply font-semibold;
-  }
+  @apply bg-storm-50 text-storm-600;
 }
 
 .item:hover .buttonIcon {
-  @apply opacity-100;
+  @apply block;
+}
 
-  &:hover {
-    @apply text-sky-900;
+.isExpanded {
+  @apply bg-[#fafbfc];
+  .buttonIcon {
+    @apply block;
   }
 }
 
-.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;
 
@@ -72,5 +77,5 @@
 }
 
 .tableStatus {
-  @apply text-coral-400 pr-4 mr-1 font-semibold;
+  @apply text-coral-400 bg-white rounded-full py-0.5 px-2 mr-3 font-semibold;
 }
diff --git a/web/renderer/components/TableList/index.module.css b/web/renderer/components/TableList/index.module.css
index 0ca36080..e26a9953 100644
--- a/web/renderer/components/TableList/index.module.css
+++ b/web/renderer/components/TableList/index.module.css
@@ -1,10 +1,14 @@
+.tableList {
+  @apply pb-20;
+}
+
 .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 font-normal;
 
     &:hover {
-      @apply text-link-2;
+      @apply text-[#FF8964];
     }
 
     svg {
@@ -16,3 +20,7 @@
 .empty {
   @apply my-4 mx-5;
 }
+
+.bottom {
+  @apply bg-storm-500 flex items-center justify-between px-6 border-t border-white border-opacity-10 fixed bottom-0 min-w-96 w-96;
+}
diff --git a/web/renderer/components/TableList/index.tsx b/web/renderer/components/TableList/index.tsx
index 3f13a71e..186b752a 100644
--- a/web/renderer/components/TableList/index.tsx
+++ b/web/renderer/components/TableList/index.tsx
@@ -7,7 +7,7 @@ import { Maybe } from "@dolthub/web-utils";
 import useTableNames from "@hooks/useTableNames";
 import { RefOptionalSchemaParams } from "@lib/params";
 import { createTable } from "@lib/urls";
-import { AiOutlinePlus } from "@react-icons/all-files/ai/AiOutlinePlus";
+import { AiOutlinePlusCircle } from "@react-icons/all-files/ai/AiOutlinePlusCircle";
 import { useEffect } from "react";
 import Item from "./Item";
 import css from "./index.module.css";
@@ -33,25 +33,25 @@ function Inner(props: InnerProps) {
     <div>
       <Tooltip id="primary-key-tip" content="primary key" place="left" />
       {props.tables.length ? (
-        <>
-          <ol>
-            {props.tables.map(t => (
-              <Item key={t} tableName={t} params={props.params} />
-            ))}
-          </ol>
-          <SchemaDiagramButton {...props} />
-        </>
+        <ol className={css.tableList}>
+          {props.tables.map(t => (
+            <Item key={t} tableName={t} params={props.params} />
+          ))}
+        </ol>
       ) : (
         <p className={css.empty}>
           No tables found for <code>{props.params.refName}</code>
         </p>
       )}
-      <HideForNoWritesWrapper params={props.params}>
-        <Link {...createTable(props.params)} className={css.addTable}>
-          <AiOutlinePlus />
-          Add new table
-        </Link>
-      </HideForNoWritesWrapper>
+      <div className={css.bottom}>
+        {props.tables.length > 0 && <SchemaDiagramButton {...props} />}
+        <HideForNoWritesWrapper params={props.params}>
+          <Link {...createTable(props.params)} className={css.addTable}>
+            <AiOutlinePlusCircle />
+            Add new table
+          </Link>
+        </HideForNoWritesWrapper>
+      </div>
     </div>
   );
 }
diff --git a/web/renderer/components/Views/index.module.css b/web/renderer/components/Views/index.module.css
index 543ce9c5..8b3e4621 100644
--- a/web/renderer/components/Views/index.module.css
+++ b/web/renderer/components/Views/index.module.css
@@ -3,11 +3,17 @@
 }
 
 .text {
-  @apply my-4 mx-5;
+  @apply my-4 mx-5 text-storm-50;
+  a {
+    @apply text-white;
+    &:hover {
+      @apply text-sky-300;
+    }
+  }
 }
 
 .icon {
-  @apply text-2xl mr-2 text-primary rounded-full opacity-25;
+  @apply text-2xl mr-2 text-white rounded-full;
 }
 
 .item {
@@ -18,14 +24,6 @@
   }
 }
 
-.item:hover .icon {
-  @apply opacity-100;
-
-  &:hover {
-    @apply text-sky-900;
-  }
-}
-
 .button {
   @apply flex justify-between items-center w-full;
 
@@ -34,15 +32,18 @@
   }
 }
 
-.selected,
 .item:hover {
-  @apply bg-white text-link-2;
+  @apply bg-storm-50;
+  .name,
+  .icon {
+    @apply text-storm-600;
+  }
 }
 
 .name {
-  @apply text-link-1 text-sm font-semibold;
+  @apply text-white text-sm font-semibold;
 }
 
 .viewing {
-  @apply py-0.5 mr-4 text-coral-400 font-semibold text-sm;
+  @apply py-0.5 mr-3 text-coral-400 bg-white px-2 rounded-full font-semibold text-sm;
 }