diff --git a/web/src/components/subnav/PageNavTab.svelte b/web/src/components/subnav/PageNavTab.svelte
index c4e113b0..a7d112c2 100644
--- a/web/src/components/subnav/PageNavTab.svelte
+++ b/web/src/components/subnav/PageNavTab.svelte
@@ -17,8 +17,8 @@
     class:active={isActive}
     role="button"
 >
-    <div class="subnav-tab-left">
-        <div class="tab-icon" style="background: var(--{iconColor})">
+    <div class="subnav-tab-left" style="--icon-color: var(--{iconColor})">
+        <div class="tab-icon">
             <svelte:component this={icon} />
         </div>
         <div class="subnav-tab-text">
@@ -65,6 +65,7 @@
         align-items: center;
         padding: var(--small-padding);
         border-radius: 5px;
+        background: var(--icon-color);
     }
 
     .subnav-tab .tab-icon :global(svg) {
@@ -74,6 +75,18 @@
         width: 20px;
     }
 
+    .subnav-tab:not(.active) .tab-icon {
+        background: rgba(0, 0, 0, 0.05);
+    }
+
+    :global([data-theme="dark"]) .subnav-tab:not(.active) .tab-icon {
+        background: rgba(255, 255, 255, 0.1);
+    }
+
+    .subnav-tab:not(.active) .tab-icon :global(svg) {
+        stroke: var(--icon-color);
+    }
+
     .subnav-tab-chevron :global(svg) {
         display: none;
         stroke-width: 2px;
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 5f4d0458..9497df0a 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -111,7 +111,7 @@
         --red: #ed2236;
         --medium-red: #ce3030;
         --dark-red: #d61c2e;
-        --green: #51cf5e;
+        --green: #30bd1b;
         --blue: #2f8af9;
 
         --focus-ring: 0 0 0 2px var(--blue) inset;