diff --git a/packages/website-ue/src/components/BaseStyles.astro b/packages/website-ue/src/components/BaseStyles.astro
index 523e77438..b6852eb2a 100644
--- a/packages/website-ue/src/components/BaseStyles.astro
+++ b/packages/website-ue/src/components/BaseStyles.astro
@@ -82,6 +82,6 @@ import "@fontsource-variable/roboto-flex";
     --duration-brief: 200ms;
     --duration-subtle: 2s;
 
-    /* --tank-card-width: 11rem; */
+    --tank-card-min-width: 11rem;
   }
 </style>
diff --git a/packages/website-ue/src/components/Navbar.astro b/packages/website-ue/src/components/Navbar.astro
index e0dba8cf9..71e7ba9d8 100644
--- a/packages/website-ue/src/components/Navbar.astro
+++ b/packages/website-ue/src/components/Navbar.astro
@@ -21,13 +21,17 @@ const { locale } = Astro.props;
     justify-content: center;
 
     z-index: 1;
-    background-color: var(--gray-a2);
     box-shadow: var(--shadow-none);
-    backdrop-filter: var(--blur-glass) brightness(10%);
+    backdrop-filter: var(--blur-glass);
     box-shadow: var(--shadow-subtle);
+    background-color: var(--black-a9);
 
     transition-duration: var(--duration-brief);
 
+    :root.light & {
+      background-color: var(--white-a9);
+    }
+
     &[data-sticky="true"] {
       transform: translateY(-100%);
       box-shadow: var(--shadow-none);
diff --git a/packages/website-ue/src/components/TankCard/index.module.css b/packages/website-ue/src/components/TankCard/index.module.css
index 42075099b..cbc4c2660 100644
--- a/packages/website-ue/src/components/TankCard/index.module.css
+++ b/packages/website-ue/src/components/TankCard/index.module.css
@@ -25,7 +25,7 @@
     }
 
     .icon {
-      width: var(--tank-card-width);
+      min-width: var(--tank-card-min-width);
       height: 7rem;
       position: relative;
 
diff --git a/packages/website-ue/src/components/TankCards/index.module.css b/packages/website-ue/src/components/TankCards/index.module.css
index bc4358201..377e81b95 100644
--- a/packages/website-ue/src/components/TankCards/index.module.css
+++ b/packages/website-ue/src/components/TankCards/index.module.css
@@ -1,6 +1,9 @@
 .tank-cards {
   display: grid;
   gap: var(--space-5) var(--space-4);
-  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(var(--tank-card-min-width), 1fr)
+  );
   justify-content: center;
 }
diff --git a/packages/website-ue/src/components/ToolBanner.astro b/packages/website-ue/src/components/ToolBanner.astro
index 4b2a89144..719ea1907 100644
--- a/packages/website-ue/src/components/ToolBanner.astro
+++ b/packages/website-ue/src/components/ToolBanner.astro
@@ -31,6 +31,10 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
 
       backdrop-filter: var(--blur-tint);
 
+      :root.light & {
+        backdrop-filter: var(--blur-tint) invert(1) hue-rotate(180deg);
+      }
+
       @media (width > 40rem) {
         padding: var(--space-6) var(--space-5);
       }
@@ -50,6 +54,10 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
         width: 100%;
         height: 100%;
 
+        :root.light & {
+          filter: invert(1) brightness(0);
+        }
+
         mask-image: linear-gradient(
           90deg,
           transparent 25%,