diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
index 562489e50c14..111e8a078443 100644
--- a/site/layouts/partials/footer.html
+++ b/site/layouts/partials/footer.html
@@ -1,59 +1,78 @@
-<footer class="bd-footer py-4 py-md-5 mt-5 bg-body-tertiary">
-  <div class="container py-4 py-md-5 px-4 px-md-3 text-body-secondary">
-    <div class="row">
+<footer class="bd-footer py-5 mt-5 bg-primary-subtle">
+  <div class="container py-5 px-4 px-md-3">
+    <div class="row g-4">
+      <!-- Brand Column -->
       <div class="col-lg-3 mb-3">
-        <a class="d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none" href="/" aria-label="Bootstrap">
-          {{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block me-2" "width" "40" "height" "32") }}
-          <span class="fs-5">Bootstrap</span>
-        </a>
-        <ul class="list-unstyled small">
-          <li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/{{ .Site.Params.docs_version }}/about/team/">Bootstrap team</a> with the help of <a href="{{ .Site.Params.repo }}/graphs/contributors">our contributors</a>.</li>
-          <li class="mb-2">Code licensed <a href="{{ .Site.Params.repo }}/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
-          <li class="mb-2">Currently v{{ .Site.Params.current_version }}.</li>
+        <div class="mb-4">
+          <a class="d-inline-flex align-items-center text-primary text-decoration-none" href="/" aria-label="Bootstrap">
+            {{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block me-2" "width" "40" "height" "32") }}
+            <span class="fs-4 fw-semibold">Bootstrap</span>
+          </a>
+        </div>
+        <ul class="list-unstyled small text-body-secondary">
+          <li class="mb-3">Designed and built with all the love in the world by the <a href="/docs/{{ .Site.Params.docs_version }}/about/team/" class="text-decoration-none text-primary">Bootstrap team</a> with the help of <a href="{{ .Site.Params.repo }}/graphs/contributors" class="text-decoration-none text-primary">our contributors</a>.</li>
+          <li class="mb-3">Code licensed <a href="{{ .Site.Params.repo }}/blob/main/LICENSE" target="_blank" rel="license noopener" class="text-decoration-none text-primary">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener" class="text-decoration-none text-primary">CC BY 3.0</a>.</li>
+          <li class="mb-3">Currently v{{ .Site.Params.current_version }}</li>
         </ul>
       </div>
-      <div class="col-6 col-lg-2 offset-lg-1 mb-3">
-        <h5>Links</h5>
+
+      <!-- Links Column -->
+      <div class="col-6 col-lg-2 offset-lg-1">
+        <h5 class="fw-semibold mb-4">Links</h5>
         <ul class="list-unstyled">
-          <li class="mb-2"><a href="/">Home</a></li>
-          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/">Docs</a></li>
-          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/examples/">Examples</a></li>
-          <li class="mb-2"><a href="{{ .Site.Params.icons }}">Icons</a></li>
-          <li class="mb-2"><a href="{{ .Site.Params.themes }}">Themes</a></li>
-          <li class="mb-2"><a href="{{ .Site.Params.blog }}">Blog</a></li>
-          <li class="mb-2"><a href="{{ .Site.Params.swag }}" target="_blank" rel="noopener">Swag Store</a></li>
+          <li class="mb-3"><a href="/" class="text-decoration-none text-body-secondary hover-primary">Home</a></li>
+          <li class="mb-3"><a href="/docs/{{ .Site.Params.docs_version }}/" class="text-decoration-none text-body-secondary hover-primary">Docs</a></li>
+          <li class="mb-3"><a href="/docs/{{ .Site.Params.docs_version }}/examples/" class="text-decoration-none text-body-secondary hover-primary">Examples</a></li>
+          <li class="mb-3"><a href="{{ .Site.Params.icons }}" class="text-decoration-none text-body-secondary hover-primary">Icons</a></li>
+          <li class="mb-3"><a href="{{ .Site.Params.themes }}" class="text-decoration-none text-body-secondary hover-primary">Themes</a></li>
+          <li class="mb-3"><a href="{{ .Site.Params.blog }}" class="text-decoration-none text-body-secondary hover-primary">Blog</a></li>
+          <li class="mb-3"><a href="{{ .Site.Params.swag }}" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Swag Store</a></li>
         </ul>
       </div>
-      <div class="col-6 col-lg-2 mb-3">
-        <h5>Guides</h5>
+
+      <!-- Guides Column -->
+      <div class="col-6 col-lg-2">
+        <h5 class="fw-semibold mb-4">Guides</h5>
         <ul class="list-unstyled">
-          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/">Getting started</a></li>
-          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/examples/starter-template/">Starter template</a></li>
-          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/webpack/">Webpack</a></li>
-          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/parcel/">Parcel</a></li>
-          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/vite/">Vite</a></li>
+          <li class="mb-3"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/" class="text-decoration-none text-body-secondary hover-primary">Getting started</a></li>
+          <li class="mb-3"><a href="/docs/{{ .Site.Params.docs_version }}/examples/starter-template/" class="text-decoration-none text-body-secondary hover-primary">Starter template</a></li>
+          <li class="mb-3"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/webpack/" class="text-decoration-none text-body-secondary hover-primary">Webpack</a></li>
+          <li class="mb-3"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/parcel/" class="text-decoration-none text-body-secondary hover-primary">Parcel</a></li>
+          <li class="mb-3"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/vite/" class="text-decoration-none text-body-secondary hover-primary">Vite</a></li>
         </ul>
       </div>
-      <div class="col-6 col-lg-2 mb-3">
-        <h5>Projects</h5>
+
+      <!-- Projects Column -->
+      <div class="col-6 col-lg-2">
+        <h5 class="fw-semibold mb-4">Projects</h5>
         <ul class="list-unstyled">
-          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap" target="_blank" rel="noopener">Bootstrap 5</a></li>
-          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/tree/v4-dev" target="_blank" rel="noopener">Bootstrap 4</a></li>
-          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/icons" target="_blank" rel="noopener">Icons</a></li>
-          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/rfs" target="_blank" rel="noopener">RFS</a></li>
-          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/examples" target="_blank" rel="noopener">Examples repo</a></li>
+          <li class="mb-3"><a href="{{ .Site.Params.github_org }}/bootstrap" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Bootstrap 5</a></li>
+          <li class="mb-3"><a href="{{ .Site.Params.github_org }}/bootstrap/tree/v4-dev" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Bootstrap 4</a></li>
+          <li class="mb-3"><a href="{{ .Site.Params.github_org }}/icons" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Icons</a></li>
+          <li class="mb-3"><a href="{{ .Site.Params.github_org }}/rfs" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">RFS</a></li>
+          <li class="mb-3"><a href="{{ .Site.Params.github_org }}/examples" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Examples repo</a></li>
         </ul>
       </div>
-      <div class="col-6 col-lg-2 mb-3">
-        <h5>Community</h5>
+
+      <!-- Community Column -->
+      <div class="col-6 col-lg-2">
+        <h5 class="fw-semibold mb-4">Community</h5>
         <ul class="list-unstyled">
-          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/issues" target="_blank" rel="noopener">Issues</a></li>
-          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/discussions" target="_blank" rel="noopener">Discussions</a></li>
-          <li class="mb-2"><a href="https://github.com/sponsors/twbs" target="_blank" rel="noopener">Corporate sponsors</a></li>
-          <li class="mb-2"><a href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener">Open Collective</a></li>
-          <li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5" target="_blank" rel="noopener">Stack Overflow</a></li>
+          <li class="mb-3"><a href="{{ .Site.Params.github_org }}/bootstrap/issues" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Issues</a></li>
+          <li class="mb-3"><a href="{{ .Site.Params.github_org }}/bootstrap/discussions" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Discussions</a></li>
+          <li class="mb-3"><a href="https://github.com/sponsors/twbs" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Corporate sponsors</a></li>
+          <li class="mb-3"><a href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Open Collective</a></li>
+          <li class="mb-3"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Stack Overflow</a></li>
         </ul>
       </div>
     </div>
   </div>
 </footer>
+
+<style>
+/* Add these styles to your CSS */
+.hover-primary:hover {
+  color: var(--bs-primary) !important;
+  transition: color 0.2s ease-in-out;
+}
+</style>
\ No newline at end of file