diff --git a/docs/index.md b/docs/index.md
index 59ad6b0e..bc0b0ce9 100755
--- a/docs/index.md
+++ b/docs/index.md
@@ -8,36 +8,39 @@ hide:
 
 Guides and resources to help you set up, configure, and troubleshoot NetAlertX.
 
-<div class="promo-card">
-  <h3>Learn</h3>
-  <p>Understand NetAlertX core features, discovery, and alerting concepts</p>
-  <a href="./FEATURES" class="promo-button">
-    Explore Features
-  </a>
-</div>
 
-<div class="promo-card">
-  <h3>Install</h3>
-  <p>Step-by-step installation guides for Docker, Home Assistant, Unraid, and bare-metal setups</p>
-  <a href="./INSTALLATION" class="promo-button">
-    View Installation Guides
-  </a>
-</div>
+<div class="promo-card-wrapper">
+  <div class="promo-card">
+    <h3>Learn</h3>
+    <p>Understand NetAlertX core features, discovery, and alerting concepts</p>
+    <a href="./FEATURES" class="promo-button">
+      Explore Features
+    </a>
+  </div>
 
-<div class="promo-card">
-  <h3>Notifications</h3>
-  <p>Learn how NetAlertX provides device presence, alerting, and compliance-friendly monitoring</p>
-  <a href="./NOTIFICATIONS" class="promo-button">
-    Explore Notifications
-  </a>
-</div>
+  <div class="promo-card">
+    <h3>Install</h3>
+    <p>Step-by-step installation guides for Docker, Home Assistant, Unraid, and bare-metal setups</p>
+    <a href="./INSTALLATION" class="promo-button">
+      View Installation Guides
+    </a>
+  </div>
 
-<div class="promo-card">
-  <h3>Contribute</h3>
-  <p>Source code, development environment setup, and contribution guidelines</p>
-  <a href="./DEV_ENV_SETUP" class="promo-button">
-    Contribute on GitHub
-  </a>
+  <div class="promo-card">
+    <h3>Notifications</h3>
+    <p>Learn how NetAlertX provides device presence, alerting, and compliance-friendly monitoring</p>
+    <a href="./NOTIFICATIONS" class="promo-button">
+      Explore Notifications
+    </a>
+  </div>
+
+  <div class="promo-card">
+    <h3>Contribute</h3>
+    <p>Source code, development environment setup, and contribution guidelines</p>
+    <a href="./DEV_ENV_SETUP" class="promo-button">
+      Contribute on GitHub
+    </a>
+  </div>
 </div>
 
 ![Preview](./img/devices_split.png)
diff --git a/docs/stylesheets/custom.css b/docs/stylesheets/custom.css
index 96193faa..bf526cb5 100644
--- a/docs/stylesheets/custom.css
+++ b/docs/stylesheets/custom.css
@@ -31,7 +31,11 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  background-color: var(--md-primary-bg-color--light);
+  background-color: color-mix(
+    in srgb,
+    var(--md-primary-fg-color) 8%,
+    transparent
+  );
   transition: transform 0.2s ease;
 }