diff --git a/assets/icons/logo-light.svg b/assets/icons/logo-light.svg
new file mode 100644
index 00000000000..6f321eba541
--- /dev/null
+++ b/assets/icons/logo-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1707.52 182.9"><defs><style>.cls-1{fill:#3C494F;}.cls-2{fill:#00b39f;}.cls-3{fill:#00d3a9;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="layer5-docs"><path class="cls-1" d="M36.7,0H0V182.7H173.6V146.2H36.6V0Z"/><path class="cls-1" d="M269.6,0,196.5,182.7h41.7L287.9,54.8l35.4,91.4H262.6L249,182.7H379.3L306.2,0Z"/><path class="cls-1" d="M429.5,64,383.8,0H338.1l73.1,109.7v73.1h36.6V109.7L520.9,0H475.8Z"/><path class="cls-1" d="M539.1,28.8v154H712.7V146.3h-137V109.8H681V73.2H575.8V36.6h137V0H539.1Z"/><path class="cls-1" d="M771.2,34.9h93.9v38H781.4l.4,34.9h25.1l66.3,75h45.2l-66.3-75h26a27.58,27.58,0,0,0,10.9-2.2,29,29,0,0,0,9.2-6.1,30.44,30.44,0,0,0,6.2-9.2,28.67,28.67,0,0,0,2.2-10.9v-51A28.34,28.34,0,0,0,878.2,0H735.6V182.7h36.6Z"/><path class="cls-2" d="M1123.9,0h-73.1V36.6h73.1Z"/><path class="cls-2" d="M1133,118.8V104.2c0-16.9-14.1-30.5-31.5-30.5H984.2V64.1h-43v41.7H1090v13.1Z"/><path class="cls-3" d="M984.1,50.3V33.7h57.5V0H941.1V50.3Z"/><path class="cls-3" d="M1090.1,128v20.2h-57.6v34.7h70.9a29.51,29.51,0,0,0,20.7-8.1,29,29,0,0,0,8.9-20.2V128Z"/><path class="cls-2" d="M980.5,128v18.9h38.3v35.9H969.5a27.14,27.14,0,0,1-19.9-8.4,30.73,30.73,0,0,1-8.5-20.9V127.9h39.4Z"/><path class="cls-1" d="M36.7,0H0V182.7H173.6V146.2H36.6V0Z"/><path class="cls-1" d="M269.6,0,196.5,182.7h41.7L287.9,54.8l35.4,91.4H262.6L249,182.7H379.3L306.2,0Z"/><path class="cls-1" d="M429.5,64,383.8,0H338.1l73.1,109.7v73.1h36.6V109.7L520.9,0H475.8Z"/><path class="cls-1" d="M539.1,28.8v154H712.7V146.3h-137V109.8H681V73.2H575.8V36.6h137V0H539.1Z"/><path class="cls-1" d="M771.2,34.9h93.9v38H781.4l.4,34.9h25.1l66.3,75h45.2l-66.3-75h26a27.58,27.58,0,0,0,10.9-2.2,29,29,0,0,0,9.2-6.1,30.44,30.44,0,0,0,6.2-9.2,28.67,28.67,0,0,0,2.2-10.9v-51A28.34,28.34,0,0,0,878.2,0H735.6V182.7h36.6Z"/><path class="cls-2" d="M1123.9,0h-73.1V36.6h73.1Z"/><path class="cls-2" d="M1133,118.8V104.2c0-16.9-14.1-30.5-31.5-30.5H984.2V64.1h-43v41.7H1090v13.1Z"/><path class="cls-3" d="M984.1,50.3V33.7h57.5V0H941.1V50.3Z"/><path class="cls-3" d="M1090.1,128v20.2h-57.6v34.7h70.9a29.51,29.51,0,0,0,20.7-8.1,29,29,0,0,0,8.9-20.2V128Z"/><path class="cls-2" d="M980.5,128v18.9h38.3v35.9H969.5a27.14,27.14,0,0,1-19.9-8.4,30.73,30.73,0,0,1-8.5-20.9V127.9h39.4Z"/><rect class="cls-1" x="1240" y="1.4" width="5" height="180"/><path class="cls-1" d="M1461.68,92c0,29-20.55,52.5-49.5,52.5h-40.5a2.69,2.69,0,0,1-3-3v-99a2.69,2.69,0,0,1,3-3h40.5C1441.13,39.46,1461.68,63,1461.68,92Zm-10.2,0c0-23.55-15.9-42.59-39.3-42.59h-33v85.19h33C1435.58,134.55,1451.48,115.5,1451.48,92Z"/><path class="cls-1" d="M1474.43,107a39.45,39.45,0,1,1,39.45,39.3A39,39,0,0,1,1474.43,107Zm69,0a29.55,29.55,0,1,0-29.55,29.7A29.26,29.26,0,0,0,1543.43,107Z"/><path class="cls-1" d="M1639.57,123.9c-5.25,13.35-18.9,22.35-34.79,22.35-22.65,0-39.45-17.1-39.45-39.3s16.8-39.3,39.45-39.3c15.89,0,29.39,9,34.79,22.35.9,2.1-.3,3.45-2.4,3.45h-4.35a3.76,3.76,0,0,1-3.6-2.25c-4.5-8.55-13.64-14-24.44-14a29.7,29.7,0,0,0,0,59.4c10.94,0,20.09-5.55,24.44-14a3.76,3.76,0,0,1,3.6-2.25h4.35C1639.27,120.45,1640.47,121.8,1639.57,123.9Z"/><path class="cls-1" d="M1707.52,124.8c0,12.3-11.1,21.45-27.74,21.45-15.45,0-26.1-7.8-27.6-20.4-.15-2.1,1-3.15,3-3.15h3.9c1.8,0,2.7,1,3.15,2.85,1.35,8.25,9,11.1,17.55,11.1,9.44,0,17.84-3.45,17.84-11.85,0-19-44.09-7.65-44.09-35.7,0-12.3,11.1-21.45,26.25-21.45,14.09,0,24.59,7.8,26.09,20.4.15,2.1-1,3.15-3,3.15H1699c-1.8,0-2.7-1-3.15-2.85-1.35-8.25-8.85-11.1-16-11.1-8,0-16.35,3.45-16.35,11.85C1663.43,108.15,1707.52,96.75,1707.52,124.8Z"/></g></g></g></svg>
diff --git a/assets/scss/_footer_project.scss b/assets/scss/_footer_project.scss
index 5ae1772bb70..5262d93e5f4 100644
--- a/assets/scss/_footer_project.scss
+++ b/assets/scss/_footer_project.scss
@@ -592,4 +592,144 @@
   .footer-company{
     margin-left: 5px;
   }
+}
+
+.footer {
+  .logo-light {
+    display: none !important;
+  }
+  .logo-dark {
+    display: block !important;
+  }
+}
+
+// Light theme styling for Footer (MeshKit / Sistent Design System)
+[data-theme="light"],
+[data-bs-theme="light"] {
+  .footer {
+    background-color: #f6f8f8 !important;
+    color: #28353a !important;
+    border-top: 1px solid #d2d8da !important;
+
+    .logo-dark {
+      display: none !important;
+    }
+    .logo-light {
+      display: block !important;
+    }
+
+    .footer-desc p,
+    .footer-desc {
+      color: #28353a !important;
+    }
+
+    .section-title {
+      color: #000d12 !important;
+      font-weight: 700;
+
+      a {
+        color: #000d12 !important;
+
+        &:hover {
+          color: $primary !important;
+        }
+      }
+    }
+
+    .footer-h5 {
+      a {
+        color: #3c494f !important;
+
+        &:hover {
+          color: $primary !important;
+        }
+      }
+    }
+
+    .footer-icons {
+      a {
+        filter: grayscale(1) opacity(0.7) !important;
+
+        &:hover {
+          filter: none !important;
+          opacity: 1 !important;
+        }
+
+        &.social-icon {
+          filter: grayscale(1) opacity(0.7) !important;
+
+          &:hover {
+            filter: none !important;
+            opacity: 1 !important;
+          }
+        }
+      }
+    }
+
+    .subscribe {
+      p {
+        color: #000d12 !important;
+        font-weight: 600;
+      }
+    }
+
+    input.footer-input {
+      background-color: #ffffff !important;
+      border: 1px solid #d2d8da !important;
+      color: #000d12 !important;
+
+      &::placeholder {
+        color: #647176 !important;
+      }
+
+      &:focus {
+        border-color: $primary !important;
+        background-color: #ffffff !important;
+        color: #000d12 !important;
+        outline: 2px solid $primary;
+        outline-offset: 2px;
+      }
+    }
+
+    .footer-button {
+      background-color: $primary !important;
+      color: #ffffff !important;
+
+      &:hover {
+        background-color: #007763 !important;
+      }
+    }
+
+    .footer-hr {
+      border-color: #d2d8da !important;
+      color: #d2d8da !important;
+    }
+
+    .footer-bottom {
+      span {
+        color: #647176 !important;
+      }
+
+      a {
+        color: #647176 !important;
+
+        &:hover {
+          color: $primary !important;
+        }
+      }
+    }
+
+    .footer-bottom-middle {
+      .status-link {
+        background-color: #eaedee !important;
+        border: 1px solid #d2d8da !important;
+        color: #28353a !important;
+
+        &:hover {
+          color: $primary !important;
+          border-color: $primary !important;
+        }
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/assets/scss/_kanvas-corner-popup.scss b/assets/scss/_kanvas-corner-popup.scss
index c86a2a33634..7208c26d1bd 100644
--- a/assets/scss/_kanvas-corner-popup.scss
+++ b/assets/scss/_kanvas-corner-popup.scss
@@ -277,4 +277,50 @@
   .kanvas-supporting-arrows.in-view {
     opacity: 1;
   }
+}
+
+// ── Light theme overrides (Sistent / MeshKit tokens) ──────────────────────────
+[data-theme="light"],
+[data-bs-theme="light"] {
+  .kanvas-corner-popup .popup-inner {
+    background: #ffffff;
+    border-color: #00b39f;
+    box-shadow: 0 4px 24px rgba(0, 179, 159, 0.18), 0 1px 6px rgba(0, 0, 0, 0.08);
+  }
+
+  .kanvas-corner-popup .close-btn {
+    color: #28353a;
+
+    &:hover {
+      color: #00b39f;
+      opacity: 1;
+    }
+  }
+
+  .kanvas-corner-popup .popup-text {
+    h1 {
+      color: #000d12;
+    }
+
+    h4 {
+      color: #647176;
+    }
+  }
+
+  .kanvas-corner-popup .try-it-text {
+    span {
+      color: #647176;
+    }
+
+    strong {
+      color: #000d12;
+    }
+  }
+
+  // Keep the Kanvas illustration canvas always dark so it looks right
+  .kanvas-transition-container {
+    .canvas-grid {
+      background: radial-gradient(ellipse at 50% 0%, rgba(0, 211, 169, 0.15) 0%, transparent 70%);
+    }
+  }
 }
\ No newline at end of file
diff --git a/assets/scss/_landing_project.scss b/assets/scss/_landing_project.scss
index 24639e5545a..7a54e1ac7d3 100644
--- a/assets/scss/_landing_project.scss
+++ b/assets/scss/_landing_project.scss
@@ -240,3 +240,102 @@
   }
 }
 
+// Light theme styles for landing page
+[data-theme="light"],
+[data-bs-theme="light"] {
+  .product-section a {
+    color: #142126 !important;
+  }
+
+  .playground-section {
+    &.playground-logo {
+      background-image: url("../images/logos/white-semi-opaque.svg"), url("../images/logos/meshery-light-icon.svg") !important;
+    }
+    &.video-play-logo {
+      background-image: url("../images/logos/white-semi-opaque.svg"), url("../images/video-play.svg") !important;
+    }
+  }
+
+  .catalog-section {
+    &.catalog-logo {
+      background-image: url("../images/logos/white-semi-opaque.svg"), url("../images/logos/catalog.svg") !important;
+    }
+    &.academy-logo {
+      background-image: url("../images/logos/white-semi-opaque.svg"), url("../images/logos/academy.svg") !important;
+    }
+    &.recognition-program-logo {
+      background-image: url("../images/logos/white-semi-opaque.svg"), url("../images/logos/recognition-program.png") !important;
+    }
+  }
+
+  .landing-card {
+    background: #ffffff !important;
+    border: 1.5px solid #d2d8da !important;
+    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04) !important;
+
+    .landing-card-title,
+    span.landing-card-title {
+      color: #000d12 !important;
+    }
+
+    p {
+      color: #28353a !important;
+    }
+
+    &:hover {
+      border: 1.5px solid $primary !important;
+      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06) !important;
+
+      .landing-card-title,
+      span.landing-card-title {
+        color: $primary !important;
+      }
+
+      p {
+        color: #000d12 !important;
+      }
+    }
+  }
+
+  .landing-card-title {
+    color: #000d12 !important;
+  }
+
+  .forum-section {
+    background: #ffffff !important;
+    border: 1.5px solid #d2d8da !important;
+    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04) !important;
+
+    .landing-card-title,
+    h1, h2, h3, h4, h5, h6,
+    span {
+      color: #000d12 !important;
+    }
+
+    p {
+      color: #28353a !important;
+    }
+
+    &:hover {
+      border-color: $primary !important;
+      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06) !important;
+    }
+  }
+
+  .handbook-section {
+    background: linear-gradient(112deg, #ffffff 34.88%, #daf3eb 92.89%, #f0faf8 159.16%) !important;
+    border: 1.5px solid #93e6d1 !important;
+    border-radius: 1rem !important;
+
+    .landing-card-title,
+    h1, h2, h3, h4, h5, h6,
+    span {
+      color: #000d12 !important;
+    }
+
+    p {
+      color: #28353a !important;
+    }
+  }
+}
+
diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss
index 7f24255458f..25e199a2bb3 100644
--- a/assets/scss/_nav.scss
+++ b/assets/scss/_nav.scss
@@ -1,8 +1,7 @@
 .td-navbar-cover {
   @include media-breakpoint-up(md) {
-
     .nav-link {
-      text-shadow: 1px 1px 2px $dark;
+      text-shadow: none;
     }
   }
 
diff --git a/assets/scss/_navbar_project.scss b/assets/scss/_navbar_project.scss
index de8e5eab459..44c593a92e2 100644
--- a/assets/scss/_navbar_project.scss
+++ b/assets/scss/_navbar_project.scss
@@ -260,4 +260,248 @@ $ecosystem-box-glow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em
   &:focus ~ .highlight-box {
     box-shadow: none;
   }
+}
+
+// Navbar Brand Logo Light/Dark Support
+.navbar-brand {
+  .logo-light {
+    display: none;
+  }
+  .logo-dark {
+    display: inline-block;
+  }
+}
+
+// Theme Toggle Button
+.theme-toggle-nav-item {
+  margin-right: 0.75rem;
+  margin-left: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.theme-toggle {
+  --size: 1.35rem;
+  appearance: none;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 0.08);
+  cursor: pointer;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  position: relative;
+  transition: all 0.3s ease;
+  vertical-align: middle;
+  outline: none;
+
+  .theme-toggle-icon {
+    display: inline-block;
+    width: var(--size);
+    height: var(--size);
+    border-radius: 50%;
+    color: $secondary;
+    box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0 0;
+    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &:hover {
+    background: rgba(0, 211, 169, 0.15);
+    border-color: $secondary;
+    transform: scale(1.05);
+
+    .theme-toggle-icon {
+      color: $secondary;
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid $primary;
+    outline-offset: 2px;
+  }
+}
+
+// Light theme state for toggle button
+[data-theme="light"],
+[data-bs-theme="light"] {
+  .navbar-brand {
+    .logo-light {
+      display: inline-block;
+    }
+    .logo-dark {
+      display: none;
+    }
+  }
+
+  .theme-toggle {
+    background: rgba(60, 73, 79, 0.08);
+    border: 1px solid rgba(60, 73, 79, 0.18);
+
+    .theme-toggle-icon {
+      --ray-size: calc(var(--size) * -0.4);
+      --offset-orthogonal: calc(var(--size) * 0.65);
+      --offset-diagonal: calc(var(--size) * 0.45);
+      transform: scale(0.75);
+      color: $saffron;
+      box-shadow: inset 0 0 0 var(--size),
+        calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size),
+        var(--offset-orthogonal) 0 0 var(--ray-size),
+        0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size),
+        0 var(--offset-orthogonal) 0 var(--ray-size),
+        calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size),
+        var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size),
+        calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size),
+        var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size);
+    }
+
+    &:hover {
+      background: rgba(235, 192, 23, 0.12);
+      border-color: #ebc017;
+
+      .theme-toggle-icon {
+        color: #d49b00;
+      }
+    }
+
+    &:focus-visible {
+      outline: 2px solid $primary;
+      outline-offset: 2px;
+    }
+  }
+
+  .td-navbar,
+  .navbar-dark,
+  .td-navbar-cover {
+    background-color: #ffffff !important;
+    border-bottom: 1px solid #eaedee !important;
+
+    .nav-link {
+      color: #3c494f !important;
+      font-weight: 600;
+      text-shadow: none !important;
+
+      &:hover {
+        color: $primary !important;
+        text-shadow: none !important;
+      }
+
+      &.current,
+      &.active {
+        color: $primary !important;
+        text-shadow: none !important;
+      }
+    }
+
+    #resourcesDropdown {
+      color: #3c494f !important;
+      text-shadow: none !important;
+
+      .down-icon svg {
+        fill: currentColor;
+      }
+
+      &:hover,
+      &.current {
+        color: $primary !important;
+      }
+    }
+
+    #signin-button .nav-link {
+      color: #142126 !important;
+      font-weight: 600;
+      text-shadow: none !important;
+
+      &:hover {
+        color: $primary !important;
+      }
+    }
+
+    .td-search {
+      background-color: #eaedee !important;
+      border: 1px solid #d2d8da !important;
+      border-radius: 1rem !important;
+
+      .td-search__input {
+        background: transparent !important;
+        color: #000d12 !important;
+
+        &::placeholder {
+          color: #647176 !important;
+        }
+
+        &:focus {
+          color: #000d12 !important;
+        }
+      }
+
+      .td-search__icon {
+        color: #647176 !important;
+      }
+
+      &:focus-within {
+        border-color: $primary !important;
+        box-shadow: none !important;
+      }
+    }
+
+    .dropdown-menu {
+      background-color: #ffffff;
+      border: 1px solid #eaedee;
+      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
+
+      .dropdown-item {
+        color: #3c494f;
+
+        &:hover {
+          background-color: rgba(0, 179, 159, 0.08);
+          color: $primary;
+
+          img {
+            filter: none;
+          }
+        }
+      }
+
+      .dropdown-divider {
+        border-top: 1px solid #eaedee;
+      }
+    }
+  }
+
+  .apps-dropdown .dropdown-menu {
+    background-color: #ffffff;
+    border: 1px solid #eaedee;
+    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
+
+    .dropdown-item {
+      background-color: #f6f8f8;
+      border: 1px solid #eaedee;
+      color: #3c494f;
+
+      span {
+        color: #3c494f;
+      }
+
+      &:hover {
+        background-color: #ffffff;
+        border-color: $primary;
+        color: $primary;
+
+        span {
+          color: $primary;
+        }
+      }
+    }
+  }
+
+  img.grid-icon {
+    filter: invert(0.2);
+    &:hover {
+      filter: invert(0.4);
+    }
+  }
 }
\ No newline at end of file
diff --git a/assets/scss/_search_project.scss b/assets/scss/_search_project.scss
index b4a06bd04ad..eef9032da70 100644
--- a/assets/scss/_search_project.scss
+++ b/assets/scss/_search_project.scss
@@ -145,15 +145,16 @@
   .td-search {
     display: flex;
     justify-content: center;
-    align-content: center;
-    // background-color: #EBC017;
+    align-items: center;
     background-color: #2e2e31;
     border-radius: 1rem;
+    position: relative;
 
     .td-search__input {
       width: 100%;
       text-indent: 1.25em;
       border-radius: 1rem;
+      padding-right: 28px;
     }
     .td-search__input:not(:focus) {
       background: transparent;
@@ -161,10 +162,84 @@
     }
     .td-search__input.form-control:focus {
       color: inherit;
+      box-shadow: none;
+    }
+  }
+}
+
+// Search shortcut badge
+#searchKey,
+button#searchKey,
+.kbc-button.kbc-button-xs {
+  background: rgba(255, 255, 255, 0.12) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  border-radius: 4px !important;
+  color: #a0a0a5 !important;
+  font-size: 11px !important;
+  font-family: inherit !important;
+  font-weight: 600 !important;
+  padding: 0 5px !important;
+  height: 18px !important;
+  min-width: 18px !important;
+  line-height: 16px !important;
+  box-shadow: none !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  cursor: pointer !important;
+  align-self: center !important;
+  margin: 0 8px 0 -26px !important;
+  outline: none;
+
+  &:focus-visible {
+    outline: 2px solid $primary !important;
+    outline-offset: 2px !important;
+  }
+}
+
+// Light theme search adjustments
+[data-theme="light"],
+[data-bs-theme="light"] {
+  .td-navbar .td-search,
+  .td-search {
+    background-color: #eaedee !important;
+    border: 1px solid #d2d8da !important;
+
+    .td-search__input {
+      color: #000d12 !important;
+
+      &::placeholder {
+        color: #647176 !important;
+      }
+
+      &:focus {
+        color: #000d12 !important;
+      }
+    }
+
+    .td-search__icon {
+      color: #647176 !important;
+    }
+
+    &:focus-within {
+      border-color: $primary !important;
+      box-shadow: none !important;
     }
   }
-  .td-search__input.form-control:focus {
-    // background-color: #EBC017;
+
+  #searchKey,
+  button#searchKey,
+  .kbc-button.kbc-button-xs {
+    background: #ffffff !important;
+    border: 1px solid #d2d8da !important;
+    color: #647176 !important;
+    box-shadow: none !important;
+  }
+
+  .popover-body {
+    background-color: #ffffff;
+    color: #3c494f;
+    border: 1px solid #eaedee;
   }
 }
 
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 3be288ac14f..e485ed1cdc3 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -20,10 +20,24 @@
 
 // Page Layout Sections
 .td-home {
-  background-color: $dark;
+  background-color: $body-bg;
   overflow-x: hidden;
 }
 
+// Dark mode: whole page wrapper uses true black
+.td-outer,
+.td-default {
+  background-color: $body-bg;
+}
+
+.td-main {
+  background-color: $body-bg;
+}
+
+.td-main main {
+  background-color: #000000;
+}
+
 // .td-cover-block--height-full {
 //   min-height: 90vh;
 
@@ -809,3 +823,460 @@ h1, h2, h3, h4, h5, h6 {
     padding-top: 0;
   }
 }
+
+// ==========================================
+// LIGHT THEME STYLING (Sistent Design System)
+// ==========================================
+[data-theme="light"],
+[data-bs-theme="light"] {
+  background-color: #f6f8f8;
+  color: #28353a;
+
+  html,
+  body {
+    background-color: #f6f8f8 !important;
+    color: #28353a;
+  }
+
+  // docs page outer wrappers
+  .td-outer,
+  .td-default,
+  .container-fluid.td-outer,
+  .container-fluid.td-default.td-outer {
+    background-color: #f6f8f8 !important;
+  }
+
+  .td-home {
+    background-color: #f6f8f8;
+  }
+
+  .td-main {
+    background-color: #f6f8f8 !important;
+  }
+
+  .td-main main {
+    background-color: #ffffff;
+  }
+
+  .td-content {
+    color: #28353a;
+
+    > h1,
+    > h2,
+    > h3,
+    > h4,
+    > h5,
+    > h6 {
+      color: #000d12;
+    }
+
+    h2 {
+      color: #000d12;
+    }
+
+    p,
+    li,
+    td {
+      color: #28353a;
+    }
+
+    .lead {
+      color: #3c494f;
+    }
+
+    p code,
+    li > code,
+    table code {
+      background-color: #eaedee;
+      color: #007763;
+      border: 1px solid #d2d8da;
+      border-radius: 4px;
+      font-weight: 500;
+      padding: 0.15rem 0.35rem;
+    }
+
+    pre {
+      background-color: #142126;
+      color: #e8eff3;
+      border: 1px solid #293b43;
+      border-radius: 8px;
+
+      > code {
+        color: #e8eff3;
+      }
+    }
+
+    blockquote {
+      color: #28353a;
+      border-left: 4px solid $primary;
+      background-color: #daf3eb;
+      padding: 0.75rem 1rem;
+      border-radius: 0 0.375rem 0.375rem 0;
+    }
+  }
+
+  a {
+    color: $primary;
+
+    &:hover {
+      color: #007763;
+    }
+  }
+
+  // Left sidebar in light mode
+  .td-sidebar {
+    background-image: none;
+    background-color: #eaedee;
+    border-right: 1px solid #d2d8da;
+
+    .td-sidebar-nav {
+      &__section-title a {
+        color: #142126;
+        font-weight: 700;
+      }
+
+      .td-sidebar-link__page {
+        color: #3c494f;
+
+        &:hover {
+          color: $primary;
+        }
+      }
+
+      a:hover {
+        color: $primary;
+      }
+
+      a.active:not(.tree-root) {
+        background-image: none !important;
+        background-color: #daf3eb !important;
+        border: none !important;
+        border-left: 3px solid $primary !important;
+        border-radius: 0 4px 4px 0 !important;
+        color: #007763 !important;
+        font-weight: 600 !important;
+      }
+
+      a.active.tree-root {
+        background-image: none !important;
+        background-color: #daf3eb !important;
+        border: 1px solid #93e6d1 !important;
+        color: #007763 !important;
+      }
+
+      .td-sidebar-link.tree-root {
+        border-bottom: 1px solid #d2d8da;
+        color: #142126;
+      }
+    }
+  }
+
+  // Right TOC sidebar in light mode
+  .td-sidebar-toc {
+    background-image: none;
+    background-color: #f6f8f8;
+    border-left: 1px solid #eaedee;
+
+    .td-toc #TableOfContents a {
+      color: #647176;
+
+      &:hover,
+      &:focus-visible {
+        color: $primary;
+        background-color: #daf3eb;
+      }
+
+      &.active {
+        color: #007763;
+        font-weight: 600;
+        border-left: 2px solid $primary;
+      }
+    }
+
+    .td-page-meta a {
+      color: #647176;
+
+      &:hover {
+        color: $primary;
+      }
+    }
+  }
+
+  // Cards
+  .card {
+    background-color: #ffffff;
+    border: 1px solid #eaedee;
+    color: #28353a;
+  }
+
+  // Alerts
+  .alert {
+    background-color: #f0fbff;
+    border: 1px solid #9eddff;
+    border-left: 4px solid #2196f3;
+    color: #0754a6;
+
+    &.alert-warning {
+      background-color: #fffee6;
+      border-color: #fffbbd;
+      border-left: 4px solid #ebc017;
+      color: #785400;
+    }
+
+    &.alert-danger {
+      background-color: #fff0f0;
+      border-color: #ffb3b9;
+      border-left: 4px solid #ff385c;
+      color: #8c0a2f;
+    }
+
+    &.alert-info {
+      background-color: #f0fbff;
+      border-color: #9eddff;
+      border-left: 4px solid #2196f3;
+      color: #0754a6;
+    }
+  }
+
+  // Nav tabs
+  .nav-tabs .nav-link {
+    color: #3c494f;
+    border-bottom: 1px solid #eaedee;
+
+    &:not(.active):hover {
+      background-color: #eaedee;
+      color: $primary;
+    }
+
+    &.active {
+      background-color: #ffffff;
+      color: $primary;
+      border-color: #d2d8da #d2d8da transparent #d2d8da;
+      font-weight: 600;
+    }
+  }
+
+  .tab-content .tab-pane {
+    background-color: #ffffff;
+    border: 1px solid #d2d8da;
+    color: #28353a;
+  }
+
+  // Tables
+  .td-initial table,
+  table {
+    color: #28353a;
+    border: 1px solid #d2d8da;
+
+    th {
+      background-color: #e8eff3;
+      color: #142126;
+      font-weight: 600;
+      border-bottom: 2px solid #c9dbe3;
+      box-shadow: none;
+    }
+
+    td {
+      background-color: transparent;
+      border-bottom: 1px solid #eaedee;
+      color: #28353a;
+      box-shadow: none;
+    }
+
+    tbody tr:nth-child(even) {
+      background-color: #f8f9fa;
+    }
+  }
+
+  // Front matter info / Page info
+  .matterinfo,
+  .pageinfo {
+    background: #ffffff;
+    border: 1.5px solid #d2d8da;
+    color: #28353a;
+
+    .matterheader {
+      color: #000d12;
+    }
+
+    .plan-support {
+      border: 1px solid #d2d8da;
+      background: #f6f8f8;
+      color: #3c494f;
+
+      &:hover {
+        border-color: $primary;
+        background-color: #daf3eb;
+        color: #007763;
+      }
+    }
+
+    .tier {
+      color: #142126;
+    }
+  }
+
+  // Cover block and overlay for landing page in light mode (Sistent / MeshKit #FAFAFA canvas)
+  .td-cover-block,
+  .td-cover-block--height-full,
+  .td-overlay,
+  .td-overlay--dark,
+  .-bg-dark {
+    background: #fafafa !important;
+    background-color: #fafafa !important;
+    background-image: none !important;
+    color: #28353a !important;
+
+    &::before,
+    &::after {
+      background: none !important;
+      background-color: transparent !important;
+      opacity: 0 !important;
+      display: none !important;
+      content: none !important;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: #000d12;
+    }
+
+    .lead {
+      color: #3c494f;
+    }
+  }
+
+  .dash-tangle {
+    background-image: linear-gradient(180deg, rgba(0, 179, 115, 0) 0%, rgba(0, 179, 159, 0.08) 100%);
+  }
+
+  .dash-ircle-container > .dash-ircle {
+    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 179, 159, 0.08) 0%, rgba(0, 179, 159, 0) 100%);
+  }
+
+  // Buttons & Dash signs
+  .l5btn {
+    background: #ffffff !important;
+    border: 1.5px solid #d2d8da !important;
+    color: #142126 !important;
+
+    > img {
+      filter: invert(0.2);
+    }
+
+    &:hover {
+      background: #daf3eb !important;
+      border-color: $primary !important;
+      color: #007763 !important;
+
+      > img {
+        filter: none;
+      }
+    }
+  }
+
+  .dashboard {
+    background-image: linear-gradient(to right, #142126 0px, #00b39f 34%, #ebc017 71%, #477e96 100%);
+  }
+
+  .dash-sign-container {
+    a.dash-sign {
+      color: #142126 !important;
+      text-shadow: none !important;
+
+      &:after {
+        box-shadow: 0 4px 15px rgba(0, 179, 159, 0.15) !important;
+      }
+
+      &:visited {
+        color: #142126 !important;
+      }
+
+      &:hover {
+        color: $primary !important;
+      }
+    }
+  }
+
+  // Ecosystem callout boxes
+  .highlight-box {
+    background-color: #fffee6;
+    border: 1.5px solid #ebc017;
+    border-radius: 8px;
+    color: #28353a;
+  }
+
+  .hidden-highlight-box {
+    border-radius: 8px;
+
+    &:hover {
+      background-color: #daf3eb;
+      border: 1px solid #93e6d1;
+    }
+  }
+
+
+  .td-offline-search-results {
+    .card {
+      background-color: #ffffff;
+      border: 1px solid #d2d8da;
+      color: #28353a;
+    }
+  }
+
+  // Video and Taxonomies
+  .video > .card-title {
+    color: #000d12;
+  }
+
+  .video > .card-text {
+    color: #3c494f;
+  }
+
+  .article-teaser.card {
+    background-color: #ffffff;
+    border: 1px solid #d2d8da;
+    color: #28353a;
+  }
+
+  .article-meta-bg {
+    background-color: #e8eff3;
+    color: #3c494f;
+  }
+
+  .taxonomy-count {
+    background-color: #daf3eb;
+    color: #007763;
+  }
+
+  .taxonomy-term {
+    background: #daf3eb;
+    color: #007763;
+    border: 1px solid #93e6d1;
+
+    &:hover {
+      background-color: $primary;
+      color: $white;
+      border-color: $primary;
+    }
+  }
+
+  // Pagination navigation
+  .pagination-nav__link {
+    border-color: #d2d8da;
+    background-color: #ffffff;
+    color: #28353a;
+
+    &:hover {
+      border-color: $primary;
+      color: $primary;
+    }
+  }
+
+  .pagination-nav__sublabel {
+    color: #647176;
+  }
+
+  .pagination-nav__label {
+    color: #000d12;
+  }
+}
diff --git a/assets/scss/_video-landing_project.scss b/assets/scss/_video-landing_project.scss
index 808f51df334..8fb646eaf4a 100644
--- a/assets/scss/_video-landing_project.scss
+++ b/assets/scss/_video-landing_project.scss
@@ -477,11 +477,116 @@ a#videoPageLink:focus {
         margin-bottom: 2rem;
     }
 
-    .subcategory-btn {
-        padding: 0.4rem 1rem;
-        font-size: 0.875rem;
-    }
     .category-tab {
         width: 50%;
     }
 }
+
+// Light theme styling for Video Landing page
+[data-theme="light"],
+[data-bs-theme="light"] {
+    .video-page-container {
+        background: linear-gradient(270deg, rgba(71, 126, 150, 0.15) 0%, rgba(0, 179, 159, 0.25) 100%);
+
+        nav.scrolled {
+            background-color: #ffffff;
+            border-bottom: 1px solid #eaedee;
+        }
+    }
+
+    .hero-section-wrapper {
+        color: #000d12;
+
+        .hero-subtitle {
+            color: #3c494f;
+        }
+    }
+
+    .video-tabs-container {
+        background: #ffffff;
+        border: 1px solid #eaedee;
+        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04);
+    }
+
+    .category-tab {
+        color: #647176;
+
+        .tab-icon {
+            background-color: #eaedee;
+
+            i {
+                color: #3c494f;
+            }
+        }
+
+        &:hover {
+            color: $primary;
+
+            .tab-icon {
+                background-color: #daf3eb;
+
+                i {
+                    color: $primary;
+                }
+            }
+        }
+
+        &.active {
+            color: $primary;
+            border-bottom: 2px solid $primary;
+
+            .tab-icon {
+                background-color: $primary;
+
+                i {
+                    color: #ffffff;
+                }
+            }
+        }
+    }
+
+    .subcategory-btn {
+        background-color: #eaedee;
+        color: #3c494f;
+        box-shadow: none;
+        border: 1px solid #d2d8da;
+
+        &:hover {
+            background-color: #daf3eb;
+            color: #007763;
+            border-color: $primary;
+        }
+
+        &.active {
+            background-color: $primary;
+            color: #ffffff;
+            border-color: $primary;
+        }
+    }
+
+    .video-card {
+        background-color: #ffffff;
+        border: 1px solid #eaedee;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+
+        .video-info {
+            h3 {
+                color: #000d12;
+            }
+
+            p.video-description {
+                color: #3c494f;
+            }
+
+            &:hover {
+                h3 {
+                    color: $primary;
+                }
+
+                p.video-description {
+                    color: #000d12;
+                }
+            }
+        }
+    }
+}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 71d7b856c7d..bf44b09c772 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -5,6 +5,8 @@
   lang="{{ .Site.Language.Lang }}"
   dir="{{ .Site.Language.Direction }}"
   class="no-js"
+  data-theme="dark"
+  data-bs-theme="dark"
 >
   <head>
     {{ partial "head.html" . }}
diff --git a/layouts/_default/content.html b/layouts/_default/content.html
index e5ba33791ab..3a2ff82355d 100644
--- a/layouts/_default/content.html
+++ b/layouts/_default/content.html
@@ -1,4 +1,4 @@
-<div class="td-content" data-bs-theme="dark">
+<div class="td-content">
 	<h1>{{ .Title }}</h1>
 	{{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
 	<header class="article-meta{{ if or .Params.categories .Params.tags }} article-meta-bg{{ end }}">
diff --git a/layouts/_partials/footer.html b/layouts/_partials/footer.html
new file mode 100644
index 00000000000..32beb658e9c
--- /dev/null
+++ b/layouts/_partials/footer.html
@@ -0,0 +1,104 @@
+<footer class="footer">
+  <!-- Hotkey func -->
+  {{partial "hotkey.html" .}}
+  <!----------------->
+  <div class="row footer-top">
+    <div class="col-lg-6">
+      <a href="{{ "" | relURL }}" aria-label="Home">
+        <img class="footer-logo logo-dark" src="{{ "images/logo.svg" | relURL }}" alt="Footer Logo Layer5" data-modal="false">
+        <img class="footer-logo logo-light" src="{{ "images/logo-light.svg" | relURL }}" alt="Footer Logo Layer5" data-modal="false">
+      </a>
+    </div>
+    <div class="col-lg-6 footer-info footer-icons">
+      {{ range .Site.Params.links.footer.icons }}
+      <a href="{{ .url  }}" class="{{ .class }}" target="_blank" rel="noreferrer" aria-label="{{ .alt }}">
+        {{ $svg1 := resources.Get .icon }}
+        <img height="30px" src="{{ $svg1.Permalink }}" alt="{{ .alt }}" data-modal="false">
+      </a>
+      {{ end }}
+    </div>
+  </div>
+  <div class="footer-info">
+    <div class="col-lg-3 footer-desc">
+      <p>Layer5 empowers engineers to build better, together. As the stewards of Meshery, and the creators of Kanvas, we deliver a Google Workspace-like experience for your infrastructure. From infrastructure as design to confident deployment, we simplify cloud management through real-time collaboration and orchestratable diagrams.</p>
+    </div>
+
+    <div class="col-lg-9">
+      <div class="footer-info">
+        <!-- Resources Section -->
+        <div class="odd-col footer-sections footer-resources">
+          <h3 class="section-title"><a href="https://layer5.io/learn">RESOURCES</a></h3>
+          {{ range .Site.Params.links.footer.resources.items }}
+          <h5 class="footer-h5">
+            <a href="{{ .url }}">{{ .name }}</a>
+          </h5>
+          {{ end }}
+        </div>
+
+        <!-- Community Section -->
+        <div class="even-col footer-sections footer-community">
+          <h3 class="section-title"><a href="https://layer5.io/community">COMMUNITY</a></h3>
+          {{ range .Site.Params.links.footer.community.items }}
+          <h5 class="footer-h5"><a href="{{ .url }}">{{ .name }}</a></h5>
+          {{ end }}
+        </div>
+
+        <!-- Projects Section -->
+        <div class="odd-col footer-sections footer-projects">
+          <h3 class="section-title"><a href="https://layer5.io/projects">SOLUTIONS</a></h3>
+          {{ range .Site.Params.links.footer.projects.items }}
+          <h5 class="footer-h5"><a href="{{ .url }}">{{ .name }}</a></h5>
+          {{ end }}
+        </div>
+
+        <!-- Company Section -->
+        <div class="even-col footer-sections footer-company">
+          <h3 class="section-title"><a href="https://layer5.io/company/about">COMPANY</a></h3>
+          {{ range .Site.Params.links.footer.company.items }}
+          <h5 class="footer-h5"><a href="{{ .url }}">{{ .name }}</a></h5>
+          {{ end }}
+        </div>
+      </div>
+      <div class="row footer-info2 subscribe">
+        <div class="footer-end">
+          <form name="contactform">
+            <div>
+              <p>
+                Subscribe to our Newsletter
+              </p>
+              <input class="footer-input" type="email" id="footer-email" name="email" placeholder="Email Address" aria-label="Email Address">
+              <button class="footer-button" title="Subscribe" type="submit">Subscribe</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+  <hr class="footer-hr" />
+  <div class="footer-bottom">
+    <div class="footer-bottom-left">
+      <span>
+        <script>document.write(new Date().getFullYear() + ' ');</script> Copyright ©Layer5, Inc | All Rights Reserved
+      </span>
+    </div>
+    <div class="footer-bottom-middle">
+      <span>
+        <span class="edit-page">
+          {{ with .File }}
+          <a href="https://github.com/layer5io/docs/tree/master{{ strings.TrimPrefix hugo.WorkingDir .Filename }}" target="_blank"
+            rel="noreferrer">Edit This Page</a>
+          {{ end }}
+        </span>
+        <span>
+          <a class="status-link" href="https://layer5.statuspage.io" target="_blank" rel="noreferrer">
+            Layer5 Cloud Status <span class="pulse-icon"></span>
+          </a>
+        </span>
+      </span>
+    </div>
+    <div class="footer-bottom-right">
+      <span><a href="https://layer5.io/company/legal/privacy">Privacy</a></span> &nbsp; <span><a
+          href="https://layer5.io/company/legal/terms-of-service">Terms</a></span>
+    </div>
+  </div>
+</footer>
diff --git a/layouts/baseof.html b/layouts/baseof.html
new file mode 100644
index 00000000000..bf44b09c772
--- /dev/null
+++ b/layouts/baseof.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html
+  itemscope
+  itemtype="http://schema.org/WebPage"
+  lang="{{ .Site.Language.Lang }}"
+  dir="{{ .Site.Language.Direction }}"
+  class="no-js"
+  data-theme="dark"
+  data-bs-theme="dark"
+>
+  <head>
+    {{ partial "head.html" . }}
+  </head>
+  <body
+    class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}"
+  >
+    <header>{{ partial "navbar.html" . }}</header>
+    <div class="container-fluid td-default td-outer">
+      <main role="main" class="td-main">{{ block "main" . }}{{ end }}</main>
+      {{ partial "footer.html" . }}
+    </div>
+    {{ partialCached "scripts.html" . }} 
+  </body>
+</html>
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
index 8766bc5985e..4e31d3ae3fb 100644
--- a/layouts/docs/baseof.html
+++ b/layouts/docs/baseof.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html itemscope itemtype="http://schema.org/WebPage" lang="{{ .Site.Language.Lang }}" dir="{{ .Site.Language.Direction }}" class="no-js">
+<html itemscope itemtype="http://schema.org/WebPage" lang="{{ .Site.Language.Lang }}" dir="{{ .Site.Language.Direction }}" class="no-js" data-theme="dark" data-bs-theme="dark">
 
 <head>
   {{ partial "head.html" . }}
diff --git a/layouts/docs/list.html b/layouts/docs/list.html
index 4b9fb5120c1..b44e5ce3e92 100644
--- a/layouts/docs/list.html
+++ b/layouts/docs/list.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-<div class="td-content" data-bs-theme="dark">
+<div class="td-content">
    <h1>{{ .Title }}</h1>
    {{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
 
diff --git a/layouts/docs/rest-apis.html b/layouts/docs/rest-apis.html
index f51744ad7ae..616a0bda55c 100644
--- a/layouts/docs/rest-apis.html
+++ b/layouts/docs/rest-apis.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-<div class="td-content rest-api-content-shell" data-bs-theme="dark">
+<div class="td-content rest-api-content-shell">
   <h1>{{ .Title }}</h1>
   {{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
   <header class="article-meta{{ if or .Params.categories .Params.tags }} article-meta-bg{{ end }}">
diff --git a/layouts/index.html b/layouts/index.html
new file mode 100644
index 00000000000..cde5d4acf6c
--- /dev/null
+++ b/layouts/index.html
@@ -0,0 +1,6 @@
+{{ define "main" }}
+{{ partial "kanvas-corner-popup.html" . }}
+{{ with .Content }}
+{{ . }}
+{{ end }}
+{{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index e4a3001eae2..ce23d7567ab 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -5,8 +5,8 @@
   <div class="row footer-top">
     <div class="col-lg-6">
       <a href="{{ "" | relURL }}" aria-label="Home">
-        {{ $svg := resources.Get "icons/logo.svg" }}
-        <img class="footer-logo" src="{{ $svg.Permalink }}" alt="Footer Logo Layer5" data-modal="false">
+        <img class="footer-logo logo-dark" src="{{ "images/logo.svg" | relURL }}" alt="Footer Logo Layer5" data-modal="false">
+        <img class="footer-logo logo-light" src="{{ "images/logo-light.svg" | relURL }}" alt="Footer Logo Layer5" data-modal="false">
       </a>
     </div>
     <div class="col-lg-6 footer-info footer-icons">
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 27bb81a2d9e..220a03bc2d3 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -34,6 +34,19 @@
 {{ template "_internal/opengraph.html" . -}}
 {{ template "_internal/schema.html" . -}}
 {{ template "_internal/twitter_cards.html" . -}}
+<script>
+  (function() {
+    try {
+      var storedTheme = localStorage.getItem('theme');
+      var theme = (storedTheme === 'light' || storedTheme === 'dark') ? storedTheme : 'dark';
+      document.documentElement.setAttribute('data-theme', theme);
+      document.documentElement.setAttribute('data-bs-theme', theme);
+    } catch (e) {
+      document.documentElement.setAttribute('data-theme', 'dark');
+      document.documentElement.setAttribute('data-bs-theme', 'dark');
+    }
+  })();
+</script>
 {{ partialCached "head-css.html" . -}}
 <script
   src="https://code.jquery.com/jquery-3.6.3.min.js"
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 9d92efc990a..1265eda43d1 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -8,8 +8,8 @@
     <div class="container-fluid flex-column flex-md-row">
       <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}" aria-label="Home">
         <span class="navbar-brand__logo navbar-logo">
-          {{ $svg := resources.Get "icons/logo.svg" }}
-          <img class="footer-logo" src="{{ "images/logo.svg" | relURL }}" alt="logo" data-modal="false" />
+          <img class="footer-logo logo-dark" src="{{ "images/logo.svg" | relURL }}" alt="Layer5 Docs Logo" data-modal="false" />
+          <img class="footer-logo logo-light" src="{{ "images/logo-light.svg" | relURL }}" alt="Layer5 Docs Logo" data-modal="false" />
         </span>
         <span class="navbar-brand__name"></span
       ></a>
@@ -30,7 +30,7 @@
                       <li class="nav-item">
                         <a id="kanvas" class="nav-link" href="{{ "kanvas/" | relURL }}"> Kanvas</a>
                       </li>
-                      <li class="nav-item dropdown" data-bs-theme="dark">
+                      <li class="nav-item dropdown">
                         <div
                         class="nav-link"
                         id="resourcesDropdown"
@@ -71,7 +71,7 @@
                         </div>
                       </li>
                     </div>
-                    <div class="d-flex ms-auto">
+                    <div class="d-flex ms-auto align-items-center">
         
 
           <li class="d-none d-lg-block nav-item">
@@ -83,7 +83,18 @@
                                 </div> -->
             {{ partial "search-input-nav.html" . }}
           </li>
-          <li class="nav-item dropdown apps-dropdown" data-bs-theme="dark">
+          <li class="nav-item d-flex align-items-center theme-toggle-nav-item" id="theme-toggle-nav-item">
+            <button
+              id="theme-toggle"
+              class="theme-toggle"
+              type="button"
+              aria-label="Switch to light theme"
+              title="Switch to light theme"
+            >
+              <span class="theme-toggle-icon"></span>
+            </button>
+          </li>
+          <li class="nav-item dropdown apps-dropdown">
             <div
             class="nav-link"
             id="productsDropdown"
@@ -196,7 +207,7 @@
           <li class="nav-item" id="signin-button" style="display: none;">
             <a class="nav-link" href="{{ $cloudLoginUrl }}" target="_blank">Sign In</a>
           </li>
-          <li class="nav-item dropdown" data-bs-theme="dark" id="userlist" style="display: none;">
+          <li class="nav-item dropdown" id="userlist" style="display: none;">
              <a href="https://cloud.layer5.io" id="user-profile-url" aria-label="User Profile">
               <div
                 class="nav-link avatar-container"
@@ -376,5 +387,53 @@
   checkUserAuth();
 
   document.addEventListener('visibilitychange', handleVisibilityChange);
+
+  // Dark/Light Theme Controller
+  (function() {
+    const toggleBtn = document.getElementById('theme-toggle');
+
+    function normalizeTheme(theme) {
+      return theme === 'light' ? 'light' : 'dark';
+    }
+
+    function applyTheme(theme) {
+      const normalizedTheme = normalizeTheme(theme);
+      document.documentElement.setAttribute('data-theme', normalizedTheme);
+      document.documentElement.setAttribute('data-bs-theme', normalizedTheme);
+      try {
+        localStorage.setItem('theme', normalizedTheme);
+      } catch (e) {}
+
+      if (toggleBtn) {
+        const isDark = normalizedTheme === 'dark';
+        const label = isDark ? 'Switch to light theme' : 'Switch to dark theme';
+        toggleBtn.setAttribute('aria-label', label);
+        toggleBtn.setAttribute('title', label);
+      }
+    }
+
+    if (toggleBtn) {
+      toggleBtn.addEventListener('click', function() {
+        const currentTheme = normalizeTheme(document.documentElement.getAttribute('data-theme'));
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+        applyTheme(newTheme);
+      });
+    }
+
+    // Set initial label and title based on active theme
+    try {
+      const activeTheme = normalizeTheme(document.documentElement.getAttribute('data-theme') || localStorage.getItem('theme'));
+      applyTheme(activeTheme);
+    } catch (e) {
+      applyTheme('dark');
+    }
+
+    // Sync across open browser tabs
+    window.addEventListener('storage', function(e) {
+      if (e.key === 'theme' && e.newValue) {
+        applyTheme(normalizeTheme(e.newValue));
+      }
+    });
+  })();
   </script>
 </header>
diff --git a/layouts/release/baseof.html b/layouts/release/baseof.html
index 18f45f566dd..896e942f08d 100644
--- a/layouts/release/baseof.html
+++ b/layouts/release/baseof.html
@@ -5,6 +5,8 @@
   lang="{{ .Site.Language.Lang }}"
   dir="{{ .Site.Language.Direction }}"
   class="no-js"
+  data-theme="dark"
+  data-bs-theme="dark"
 >
   <head>
     {{ partial "head.html" . }}
diff --git a/layouts/release/list.html b/layouts/release/list.html
index be7fdfb075a..2537a29b263 100644
--- a/layouts/release/list.html
+++ b/layouts/release/list.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-<div class="td-content" data-bs-theme="dark">
+<div class="td-content">
 	<h1>{{ .Title }}</h1>
   {{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
 	<header class="article-meta{{ if or .Params.categories .Params.tags }} article-meta-bg{{ end }}">
diff --git a/layouts/shortcodes/ecosystem-box.html b/layouts/shortcodes/ecosystem-box.html
index f60002573de..3508eccc030 100644
--- a/layouts/shortcodes/ecosystem-box.html
+++ b/layouts/shortcodes/ecosystem-box.html
@@ -36,7 +36,7 @@
       {{- end -}}
     {{- end -}}
   </span>
-  <span style="margin:auto; color:#ccc; line-height:1.85rem;">
+  <span style="margin:auto; line-height:1.85rem;">
     <strong>{{ $title }}</strong> {{ .Inner | .Page.RenderString }}
   </span>
 </a>
diff --git a/layouts/video/baseof.html b/layouts/video/baseof.html
index ac772ee7105..9fcc271a311 100644
--- a/layouts/video/baseof.html
+++ b/layouts/video/baseof.html
@@ -5,6 +5,8 @@
   lang="{{ .Site.Language.Lang }}"
   dir="{{ .Site.Language.Direction }}"
   class="no-js"
+  data-theme="dark"
+  data-bs-theme="dark"
 >
   <head>
     {{ partial "head.html" . }}
diff --git a/layouts/video/list.html b/layouts/video/list.html
index b222a11331a..f3016d005b1 100644
--- a/layouts/video/list.html
+++ b/layouts/video/list.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-<div class="td-content" data-bs-theme="dark">
+<div class="td-content">
 	<h1>{{ .Title }}</h1>
   {{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
 	<header class="article-meta{{ if or .Params.categories .Params.tags  }} article-meta-bg{{ end }}">
diff --git a/static/images/logo-light.svg b/static/images/logo-light.svg
new file mode 100644
index 00000000000..6f321eba541
--- /dev/null
+++ b/static/images/logo-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1707.52 182.9"><defs><style>.cls-1{fill:#3C494F;}.cls-2{fill:#00b39f;}.cls-3{fill:#00d3a9;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="layer5-docs"><path class="cls-1" d="M36.7,0H0V182.7H173.6V146.2H36.6V0Z"/><path class="cls-1" d="M269.6,0,196.5,182.7h41.7L287.9,54.8l35.4,91.4H262.6L249,182.7H379.3L306.2,0Z"/><path class="cls-1" d="M429.5,64,383.8,0H338.1l73.1,109.7v73.1h36.6V109.7L520.9,0H475.8Z"/><path class="cls-1" d="M539.1,28.8v154H712.7V146.3h-137V109.8H681V73.2H575.8V36.6h137V0H539.1Z"/><path class="cls-1" d="M771.2,34.9h93.9v38H781.4l.4,34.9h25.1l66.3,75h45.2l-66.3-75h26a27.58,27.58,0,0,0,10.9-2.2,29,29,0,0,0,9.2-6.1,30.44,30.44,0,0,0,6.2-9.2,28.67,28.67,0,0,0,2.2-10.9v-51A28.34,28.34,0,0,0,878.2,0H735.6V182.7h36.6Z"/><path class="cls-2" d="M1123.9,0h-73.1V36.6h73.1Z"/><path class="cls-2" d="M1133,118.8V104.2c0-16.9-14.1-30.5-31.5-30.5H984.2V64.1h-43v41.7H1090v13.1Z"/><path class="cls-3" d="M984.1,50.3V33.7h57.5V0H941.1V50.3Z"/><path class="cls-3" d="M1090.1,128v20.2h-57.6v34.7h70.9a29.51,29.51,0,0,0,20.7-8.1,29,29,0,0,0,8.9-20.2V128Z"/><path class="cls-2" d="M980.5,128v18.9h38.3v35.9H969.5a27.14,27.14,0,0,1-19.9-8.4,30.73,30.73,0,0,1-8.5-20.9V127.9h39.4Z"/><path class="cls-1" d="M36.7,0H0V182.7H173.6V146.2H36.6V0Z"/><path class="cls-1" d="M269.6,0,196.5,182.7h41.7L287.9,54.8l35.4,91.4H262.6L249,182.7H379.3L306.2,0Z"/><path class="cls-1" d="M429.5,64,383.8,0H338.1l73.1,109.7v73.1h36.6V109.7L520.9,0H475.8Z"/><path class="cls-1" d="M539.1,28.8v154H712.7V146.3h-137V109.8H681V73.2H575.8V36.6h137V0H539.1Z"/><path class="cls-1" d="M771.2,34.9h93.9v38H781.4l.4,34.9h25.1l66.3,75h45.2l-66.3-75h26a27.58,27.58,0,0,0,10.9-2.2,29,29,0,0,0,9.2-6.1,30.44,30.44,0,0,0,6.2-9.2,28.67,28.67,0,0,0,2.2-10.9v-51A28.34,28.34,0,0,0,878.2,0H735.6V182.7h36.6Z"/><path class="cls-2" d="M1123.9,0h-73.1V36.6h73.1Z"/><path class="cls-2" d="M1133,118.8V104.2c0-16.9-14.1-30.5-31.5-30.5H984.2V64.1h-43v41.7H1090v13.1Z"/><path class="cls-3" d="M984.1,50.3V33.7h57.5V0H941.1V50.3Z"/><path class="cls-3" d="M1090.1,128v20.2h-57.6v34.7h70.9a29.51,29.51,0,0,0,20.7-8.1,29,29,0,0,0,8.9-20.2V128Z"/><path class="cls-2" d="M980.5,128v18.9h38.3v35.9H969.5a27.14,27.14,0,0,1-19.9-8.4,30.73,30.73,0,0,1-8.5-20.9V127.9h39.4Z"/><rect class="cls-1" x="1240" y="1.4" width="5" height="180"/><path class="cls-1" d="M1461.68,92c0,29-20.55,52.5-49.5,52.5h-40.5a2.69,2.69,0,0,1-3-3v-99a2.69,2.69,0,0,1,3-3h40.5C1441.13,39.46,1461.68,63,1461.68,92Zm-10.2,0c0-23.55-15.9-42.59-39.3-42.59h-33v85.19h33C1435.58,134.55,1451.48,115.5,1451.48,92Z"/><path class="cls-1" d="M1474.43,107a39.45,39.45,0,1,1,39.45,39.3A39,39,0,0,1,1474.43,107Zm69,0a29.55,29.55,0,1,0-29.55,29.7A29.26,29.26,0,0,0,1543.43,107Z"/><path class="cls-1" d="M1639.57,123.9c-5.25,13.35-18.9,22.35-34.79,22.35-22.65,0-39.45-17.1-39.45-39.3s16.8-39.3,39.45-39.3c15.89,0,29.39,9,34.79,22.35.9,2.1-.3,3.45-2.4,3.45h-4.35a3.76,3.76,0,0,1-3.6-2.25c-4.5-8.55-13.64-14-24.44-14a29.7,29.7,0,0,0,0,59.4c10.94,0,20.09-5.55,24.44-14a3.76,3.76,0,0,1,3.6-2.25h4.35C1639.27,120.45,1640.47,121.8,1639.57,123.9Z"/><path class="cls-1" d="M1707.52,124.8c0,12.3-11.1,21.45-27.74,21.45-15.45,0-26.1-7.8-27.6-20.4-.15-2.1,1-3.15,3-3.15h3.9c1.8,0,2.7,1,3.15,2.85,1.35,8.25,9,11.1,17.55,11.1,9.44,0,17.84-3.45,17.84-11.85,0-19-44.09-7.65-44.09-35.7,0-12.3,11.1-21.45,26.25-21.45,14.09,0,24.59,7.8,26.09,20.4.15,2.1-1,3.15-3,3.15H1699c-1.8,0-2.7-1-3.15-2.85-1.35-8.25-8.85-11.1-16-11.1-8,0-16.35,3.45-16.35,11.85C1663.43,108.15,1707.52,96.75,1707.52,124.8Z"/></g></g></g></svg>
diff --git a/static/images/logos/white-semi-opaque.svg b/static/images/logos/white-semi-opaque.svg
new file mode 100644
index 00000000000..80c69f07cd3
--- /dev/null
+++ b/static/images/logos/white-semi-opaque.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+	 width="400px" height="400px" viewBox="0 0 400 400" xml:space="preserve">
+<rect width="400" height="400" fill="#ffffff" opacity="0.90"/>
+</svg>