diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 114af158..afc11bfd 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -1,3 +1,95 @@
+/* MARK: Reset
+*/
+/* Modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+  overflow-y: scroll;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin-block-end: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+  margin: 0;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+  line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4 {
+  text-wrap: balance;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+  min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
+}
+
+/* END RESET */
+
 /* Regular */
 @font-face {
   font-family: "JetBrainsMono";
@@ -92,7 +184,6 @@
   --sidebar-line-box-side-length: 8px;
   --sidebar-line-box-top: 6px;
   --sidebar-line-box-left: 12px;
-  --sidebar-width: 22rem;
   --sidebar-line-width: 11.5px;
   --sidebar-mobile-top-displacement: 5rem;
   --side-gutter-width: 20rem;
@@ -112,35 +203,60 @@
   --overflow-gutter-extension: 1rem;
 
   --flow-gap: 1rem;
-}
 
-/* MARK: Reset
-*/
-html,
-body,
-p,
-ol,
-ul,
-li,
-dl,
-dt,
-dd,
-blockquote,
-figure,
-fieldset,
-legend,
-textarea,
-pre,
-iframe,
-hr,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 0;
-  padding: 0;
+  /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+  /* ALWAYS use for fonts */
+  --font-step--3: clamp(0.576rem, 0.5796rem + -0.0047vw, 0.5787rem);
+  --font-step--2: clamp(0.6944rem, 0.6856rem + 0.0444vw, 0.72rem);
+  --font-step--1: clamp(0.8333rem, 0.8101rem + 0.1159vw, 0.9rem);
+  --font-step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
+  --font-step-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);
+  --font-step-2: clamp(1.44rem, 1.3295rem + 0.5527vw, 1.7578rem);
+  --font-step-3: clamp(1.728rem, 1.5648rem + 0.8161vw, 2.1973rem);
+  --font-step-4: clamp(2.0736rem, 1.8395rem + 1.1704vw, 2.7466rem);
+  --font-step-5: clamp(2.4883rem, 2.1597rem + 1.6433vw, 3.4332rem);
+
+  /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+  /* ALWAYS use for horizontal spacing */
+  --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
+  --space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem);
+  --space-xs: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
+  --space-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
+  --space-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem);
+  --space-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem);
+  --space-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);
+  --space-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem);
+  --space-3xl: clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem);
+
+  /* One-up pairs */
+  --space-3xs-2xs: clamp(0.25rem, 0.1413rem + 0.5435vw, 0.5625rem);
+  --space-2xs-xs: clamp(0.5rem, 0.3696rem + 0.6522vw, 0.875rem);
+  --space-xs-s: clamp(0.75rem, 0.6196rem + 0.6522vw, 1.125rem);
+  --space-s-m: clamp(1rem, 0.7609rem + 1.1957vw, 1.6875rem);
+  --space-m-l: clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem);
+  --space-l-xl: clamp(2rem, 1.5217rem + 2.3913vw, 3.375rem);
+  --space-xl-2xl: clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem);
+  --space-2xl-3xl: clamp(4rem, 3.0435rem + 4.7826vw, 6.75rem);
+
+  /* Custom pairs */
+  --space-s-l: clamp(1rem, 0.5652rem + 2.1739vw, 2.25rem);
+
+  /* @link https://utopia.fyi/grid/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+  --grid-max-width: 69.75rem;
+  --grid-min-width: 34rem;
+  --grid-gutter: var(--space-s-l, clamp(1rem, 0.4975rem + 2.5126vw, 2.25rem));
+  --grid-columns: 12;
+
+  /* TODO: This aligns the logo in the header perfectly with the one in the sidebar, but
+ this is not a safe way to do it, and likely to get out of sync */
+  --header-height: 93px;
+
+  --sidebar-width: 22rem;
+  --sidebar-item-padding: 0.25rem 0.75rem;
+  --content-max-width: 88rem;
+
+  --main-col: minmax(34rem, 50rem);
+  --side-col: minmax(18rem, 26rem);
 }
 
 @supports (font-variation-settings: normal) {
@@ -173,6 +289,9 @@ h6,
 
 html {
   scroll-behavior: smooth;
+  font-optical-sizing: auto;
+  font-weight: 300;
+  font-style: normal;
 }
 
 h1,
@@ -215,44 +334,114 @@ ol li:last-child {
 
 /* MARK: Layout
 */
-header {
-  margin: 2rem 2rem 0 2rem;
+
+.grid-container {
+  display: grid;
+  grid-template-columns: var(--sidebar-width) 1fr;
+  grid-template-rows: var(--header-height) 1fr auto;
+  grid-template-areas:
+    "sidebar header"
+    "sidebar content"
+    "sidebar footer";
+  min-height: 100vh;
+  min-width: var(--grid-min-width);
+
+  @media (max-width: 68rem) {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "header"
+      "content"
+      "footer";
+  }
+
+  .header__logo {
+    display: none;
+  }
+}
+
+/* Homepage specific layout */
+.grid-container:has(.homepage) {
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "header"
+    "content"
+    "footer";
+
+  .sidebar {
+    display: none;
+  }
+
+  .header__logo {
+    display: unset;
+  }
+
+  .header__product-selector {
+    display: none;
+  }
+}
+
+/* Search specific layout */
+.grid-container:has(.search) {
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "header"
+    "content"
+    "footer";
+
+  .sidebar {
+    display: none;
+  }
+
+  .header__logo {
+    display: unset;
+  }
+}
+
+.header {
+  grid-area: header;
+  display: flex;
+  padding: 0 var(--space-s);
 
   .header-container {
     display: flex;
     flex-direction: row;
-    flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
     width: 100%;
 
-    > ul {
-      padding: 0;
+    .header__img {
+      height: 2rem;
+      padding-left: 12px;
     }
 
-    @media (max-width: 700px) {
-      a,
-      ul {
-        width: calc(50% - 1rem);
-      }
+    .header__search {
+      width: 14rem;
+    }
 
-      li {
-        float: right;
-      }
+    .header__product-selector {
+      width: 10rem;
 
-      div {
-        order: 3;
-        width: 100%;
+      .product-selector__button {
+        display: flex;
+        align-items: center;
+        background: oklch(var(--color-background));
+        border: none;
+        width: 16rem;
+        font-weight: 500;
+        cursor: pointer;
+        color: oklch(var(--color-foreground));
+        text-decoration-color: oklch(var(--color-brand) / 0.3);
+        transition: color 0.15s ease-in-out;
 
-        #search-standalone-header {
-          margin-top: 1rem;
+        & :hover {
+          color: oklch(var(--color-brand));
         }
       }
     }
-  }
 
-  ul {
-    list-style: none;
+    > ul {
+      padding: 0;
+    }
   }
 
   .dropdown-content {
@@ -265,7 +454,7 @@ header {
     display: none;
     width: 400px;
     max-width: 80vw;
-    margin-right: 2rem;
+    margin-right: 1rem;
   }
 
   .dropdown-content ul {
@@ -289,22 +478,102 @@ header {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
+
+  ul {
+    list-style: none;
+  }
 }
 
-main {
-  flex: 1;
-  min-width: 20rem;
-  margin: 0 2rem 2rem 1rem;
+.content {
+  grid-area: content;
+  justify-self: center;
+  padding: 0 var(--space-l) 2rem var(--space-l);
+  max-width: var(--content-max-width);
+
+  /* Allow redocly to fill the entire container */
+  &.content__redocly {
+    justify-self: unset;
+    max-width: unset;
+  }
 }
 
-/* MARK: Footer
-*/
-footer {
+.footer {
+  grid-area: footer;
+  padding: var(--space-l);
   background-color: oklch(var(--color-footer));
-  padding: 2.5rem;
   margin-top: auto;
 }
 
+/* sidebar layout */
+.sidebar {
+  grid-area: sidebar;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: var(--sidebar-width);
+  height: 100vh;
+  border-right: 1px solid oklch(var(--color-divider));
+  overflow: hidden;
+  background: oklch(var(--color-background));
+  box-sizing: border-box;
+  transform: translateX(0);
+  padding: var(--space-s) 0 var(--space-s) var(--space-s);
+
+  .sidebar__container {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    height: 100%;
+
+    .sidebar__header {
+      position: sticky;
+      top: 0;
+      background: oklch(var(--color-background));
+      z-index: 1;
+      padding: var(--sidebar-item-padding);
+
+      .sidebar__img {
+        height: 2rem;
+      }
+    }
+
+    .sidebar__content {
+      overflow-y: auto;
+      min-height: 0;
+      /* allows space for scrollbar */
+      width: calc(var(--sidebar-width) - 1rem);
+      scrollbar-gutter: stable;
+    }
+  }
+}
+
+@media (max-width: 68rem) {
+  .sidebar {
+    grid-area: sidebar;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: var(--sidebar-width, 16rem);
+    transform: translateX(-100%);
+  }
+
+  #sidebar-toggle:checked ~ .sidebar {
+    transform: translateX(0);
+  }
+
+  .sidebar-button {
+    display: block;
+    margin-bottom: 1rem;
+    padding: 0.5rem 1rem;
+    background: #000;
+    color: #fff;
+    cursor: pointer;
+  }
+}
+
+/* MARK: Footer
+*/
+
 .footer-layout {
   display: grid;
   grid-template-columns: 1fr;
@@ -366,7 +635,7 @@ nav {
 */
 
 .homepage {
-  margin: 0 2rem;
+  --content-max-width: 120rem;
 
   .homepage-heading {
     grid-column: 1 / -1;
@@ -379,10 +648,20 @@ nav {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(120px, 500px));
     gap: 1.5rem;
-    padding: 1rem;
+
     justify-content: center;
     max-width: 98rem;
     margin: 0 auto;
+    padding-bottom: 2rem;
+
+    a {
+      color: oklch(var(--color-foreground));
+      text-decoration-color: oklch(var(--color-background));
+
+      &:hover {
+        text-decoration-color: oklch(var(--color-background));
+      }
+    }
 
     .homepage-heading {
       grid-column: 1 / -1;
@@ -390,21 +669,12 @@ nav {
     }
   }
 
-  a {
-    color: oklch(var(--color-foreground));
-    text-decoration-color: oklch(var(--color-background));
-
-    &:hover {
-      text-decoration-color: oklch(var(--color-background));
-    }
-  }
-
   /* Styling for items */
   .homepage-item {
     background: oklch(var(--color-background));
     border: 1px solid oklch(var(--color-codeblock-border));
     box-shadow: 3px 3px 0px oklch(var(--color-shadow));
-    height: 7rem;
+    min-height: 11rem;
     padding: 1rem 2rem 2rem 2rem;
     display: flex;
     flex-direction: column;
@@ -466,28 +736,6 @@ nav {
   min-width: 100%;
 }
 
-.sidebar-layout {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  z-index: 2;
-  min-height: 74vh;
-
-  .sidebar__mobile__toggle {
-    display: none;
-  }
-}
-
-.sidebar-layout::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: 1px;
-  background-color: oklch(var(--color-divider));
-}
-
 #searchbox {
   width: 24rem;
   display: none;
@@ -498,17 +746,6 @@ nav {
   grid-column: 1 / -1;
 }
 
-/* The default main-layout */
-.main-layout {
-  display: grid;
-  grid-template-columns: 1fr;
-}
-
-.sidebar-container {
-  display: flex;
-  flex-direction: column;
-}
-
 .text-content {
   grid-column: 1 / -1;
   display: grid;
@@ -533,12 +770,6 @@ nav {
 }
 
 @media (max-width: 88rem) {
-  .base-layout {
-    display: grid;
-    grid-template-rows: repeat(2, auto);
-    column-gap: var(--grid-column-gutter);
-  }
-
   .content-layout .breadcrumb-layout {
     position: sticky;
     top: 0;
@@ -625,17 +856,9 @@ nav {
 }
 
 @media (min-width: 88em) {
-  .base-layout {
-    --grid-column-gutter: 4.5rem;
-    display: grid;
-    grid-template-rows: repeat(2, auto);
-    column-gap: var(--grid-column-gutter);
-    max-width: 100%;
-  }
-
   .text-content {
     grid-template-columns: var(--grid-content) var(--grid-side-callout);
-    grid-template-rows: 70px max-content;
+    grid-template-rows: 3rem max-content;
     column-gap: var(--grid-column-gutter);
   }
 
@@ -643,12 +866,6 @@ nav {
     grid-column: 1;
   }
 
-  .main-layout {
-    display: grid;
-    grid-template-columns: var(--sidebar-width) 1fr;
-    column-gap: var(--grid-sidebar-gutter);
-  }
-
   .content-layout {
     display: grid;
     grid-template-columns: 1fr minmax(
@@ -673,7 +890,7 @@ nav {
 }
 
 .list-page {
-  --flow-gap: .5rem;
+  --flow-gap: 0.5rem;
 
   h2 {
     font-size: 1.5rem;
@@ -689,28 +906,6 @@ nav {
   grid-template-rows: calc(70px + var(--flow-gap)) max-content;
 }
 
-.api {
-  margin: 0 0 1rem 1rem;
-  .row {
-    display: grid !important;
-  }
-
-  .breadcrumb-layout {
-    width: auto;
-    margin-top: 2rem;
-  }
-
-  .nginx-docs-api-container {
-    grid-column: 1 / -1;
-    max-width: 100% !important;
-    margin-top: 2rem;
-  }
-
-  .content-layout {
-    grid-template-columns: 1fr var(--side-gutter-width);
-  }
-}
-
 /* MARK: Coveo
 */
 #search-v2 {
@@ -728,8 +923,6 @@ nav {
 
 atomic-search-interface {
   height: fit-content;
-  margin-bottom: 2rem;
-  margin-top: 2rem;
 }
 
 .header-search-box {
@@ -837,18 +1030,31 @@ body:not(:has(.main-layout)) header atomic-search-interface {
 */
 
 .product-selector {
+  /* should appear above search box on smaller displays */
+  z-index: 11;
   display: none;
   position: absolute;
   top: 0;
-  min-width: 80%;
-  margin-top: 8.375rem;
-  margin-left: 44rem;
+  margin-top: 4em;
   padding: 1rem 1.5rem;
   background-color: oklch(var(--color-background));
   border: oklch(var(--color-foreground)) 1px solid;
   box-shadow: 3px 3px 0px oklch(var(--color-shadow));
 }
 
+.product-name {
+  padding-right: var(--space-s);
+}
+
+.product-selector-button-icon {
+  color: black;
+
+  svg {
+    color: black;
+    stroke: currentColor;
+  }
+}
+
 button:has(~ .product-selector[style*="block"])
   > .product-selector-button-icon {
   transition: transform 0.1s ease-in-out;
@@ -877,7 +1083,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
   font-size: 1rem;
 }
 
-/* MARK: Sidebar
+/* MARK: Sidebar - Content
 */
 
 nav.sidebar.sidebar__mobile-open {
@@ -885,21 +1091,9 @@ nav.sidebar.sidebar__mobile-open {
 }
 
 .sidebar {
+  grid-area: sidebar;
   --color-foreground: oklch(0 0 0 / 0.75);
 
-  display: flex;
-  flex-direction: column;
-  width: 22rem;
-  max-height: 100vh;
-  position: sticky;
-  top: 0;
-  margin-top: 0rem;
-  padding-top: 1.5rem;
-  align-items: start;
-  overflow-y: auto;
-  overflow-x: hidden;
-  color: var(--color-foreground);
-
   .sidebar__container,
   .sidebar__container button,
   .sidebar__container ul,
@@ -916,7 +1110,7 @@ nav.sidebar.sidebar__mobile-open {
   }
 
   .sidebar__container button {
-    padding: 0.25rem 0.75rem;
+    padding: var(--sidebar-item-padding);
     justify-content: space-between;
   }
 
@@ -978,7 +1172,7 @@ nav.sidebar.sidebar__mobile-open {
 
   .sidebar__link {
     display: block;
-    padding: 0.25rem 0.75rem;
+    padding: var(--sidebar-item-padding);
     margin: 2px 0 2px 0;
     border-radius: 5px 0 0 5px;
     color: oklch(0 0 0 / 0.75);
@@ -1074,9 +1268,6 @@ p {
 .breadcrumb-layout {
   position: relative;
   background-color: white;
-  /* width: calc(100% + 4rem); */
-  margin-left: -2rem;
-  padding: 1rem 2rem;
 
   .sidebar__mobile__toggle {
     display: none;
@@ -1127,7 +1318,7 @@ h1 {
 
 h2 {
   font-size: 1.5rem;
-  margin: 1rem 0 .75rem 0;
+  margin: 1rem 0 0.75rem 0;
 }
 
 h2:target,
diff --git a/assets/js/product-selector.js b/assets/js/product-selector.js
index 909b9f51..8ce2f0e3 100644
--- a/assets/js/product-selector.js
+++ b/assets/js/product-selector.js
@@ -4,24 +4,19 @@ document.addEventListener('DOMContentLoaded', () => {
     'product-selector-button'
   );
 
-  if (productSelectorButton === null || productSelectorContent == null) {
-    return;
-  }
+  if (!productSelectorButton || !productSelectorContent) return;
 
   productSelectorButton.addEventListener('click', () => {
-    /* Logic for hiding/showing ONLY when the button is clicked */
-    if (productSelectorContent.style.display === 'block') {
-      productSelectorContent.style.display = 'none';
-      productSelectorButton.classList.remove('remove-bottom-radius');
-    } else {
-      productSelectorContent.style.display = 'block';
-      productSelectorButton.classList.add('remove-bottom-radius');
-    }
+    const isVisible = productSelectorContent.style.display === 'block';
+    productSelectorContent.style.display = isVisible ? 'none' : 'block';
+    productSelectorButton.classList.toggle('remove-bottom-radius', !isVisible);
   });
 
   window.addEventListener('click', (event) => {
-    /* Greedy Logic to hide the product selector when something other than the button is clicked. Assumes everything has an id containing "product-selector" */
-    if (!event.target.id.includes('product-selector')) {
+    const isClickInside =
+      productSelectorButton.contains(event.target) ||
+      productSelectorContent.contains(event.target);
+    if (!isClickInside) {
       productSelectorContent.style.display = 'none';
       productSelectorButton.classList.remove('remove-bottom-radius');
     }
diff --git a/exampleSite/content/test-product/_index.md b/exampleSite/content/test-product/_index.md
index 7491b56f..a15dff23 100644
--- a/exampleSite/content/test-product/_index.md
+++ b/exampleSite/content/test-product/_index.md
@@ -53,4 +53,4 @@ This is a compilation of all our shortcodes to show how they look, function, res
       Installing NGINX
     {{</card >}}
   {{</card-section >}}
-{{</card-layout >}}
\ No newline at end of file
+{{</card-layout >}}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index ba92f241..e00ee014 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -39,24 +39,27 @@
 
   <body id="body">
     {{ if or ( not hugo.IsServer ) ( not ( in .Site.Params.buildtype "package" ) ) }}
-  {{ partial "universal-tag.html" . }}
+    {{ partial "universal-tag.html" . }}
     {{ end }}
+    <div class="grid-container">
+        <aside class="sidebar">
+            {{ partial "sidebar-v2.html" . }}
+        </aside>
 
-    <header>
-      {{ block "header" . }}{{end}}
-    </header>
+        <header class="header">
+            {{ block "header" . }}{{end}}
+        </header>
 
-    <section class="base-layout" data-testid="base-layout">
-      <div class="main container-fluid min-page-height" data-menu-id="{{.RelPermalink}}">
         {{ block "main" . }}{{ end }}
-      </div>
-  </section>
-
-    <footer id="footer-v2">
-      {{ block "footer-v2" . }}
-      {{ partial "footer-v2.html" . }}
-      {{ end }}
-    </footer>
+
+        <footer class="footer">
+            {{ block "footer-v2" . }}
+            {{ partial "footer-v2.html" . }}
+            {{ end }}
+        </footer>
+    </div>
+
+
   {{ partial "scripts.html" . }}
   <div id="consent_blackbar"></div>
 </body>
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index ef2f5c04..8980538c 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,58 +1,50 @@
 {{ define "main" }}
-{{/*  mf list page  */}}
-<main class="content col d-block align-top content-has-toc" role="main">
-<section class="main-layout">
-  <div class="sidebar-layout" id="sidebar-layout">
-    <button class="sidebar__mobile__toggle" aria-label="sidebar__mobile__toggle" aria-expanded="false">{{ partial "lucide" (dict "context" . "icon" "x")}}Close</button>
-    <nav id="sidebar-v2" class="sidebar">
-      {{ partial "sidebar-v2.html" . }}
-    </nav>
-  </div>
 
-  <section id="maincontent" class="content-layout">
+<main class="content content-has-toc" role="main">
+<section class="main-layout">
+    <section id="maincontent" class="content-layout">
     <div data-cms-edit="content" class="text-content list-page">
-      <section class="breadcrumb-layout wide">
+        <section class="breadcrumb-layout wide">
         {{ if not .IsHome }}
-          {{ if not (in .Params.display_breadcrumb "false" ) }}
-          {{ partial "breadcrumb" .}}
-          {{ end }}
+            {{ if not (in .Params.display_breadcrumb "false" ) }}
+            {{ partial "breadcrumb" .}}
+            {{ end }}
         {{ end }}
-      </section>
-      <div class="list-header-container">
-        <img src="/images/icons/{{ .Params.logo | default "NGINX-product-icon.svg" }}">
-        <div class="list-header-title">
-          <h1>{{ .Title }}</h1>
-          {{ if index .Params "nd-subtitle" }}
-            <p>{{ index .Params "nd-subtitle" | markdownify }}</p>
-          {{ end }}
+        </section>
+        <div class="list-header-container">
+          <img src="/images/icons/{{ .Params.logo | default "NGINX-product-icon.svg" }}">
+          <div class="list-header-title">
+            <h1>{{ .Title }}</h1>
+            {{ if index .Params "nd-subtitle" }}
+              <p>{{ index .Params "nd-subtitle" | markdownify }}</p>
+            {{ end }}
+          </div>
         </div>
-      </div>
 
-      {{ partial "banner" . }}
-      {{ $hasCustomContent := index .Params "nd-landing-page" | default false }}
-      {{ if $hasCustomContent }} 
+        {{ partial "banner" . }}
+
+        {{ $hasCustomContent := index .Params "nd-landing-page" | default false }}
+        {{ if $hasCustomContent }}
         {{ .Content }}
-      {{ else }}
+        {{ else }}
         {{ range .Pages.ByWeight }}
         <h2>
             <a href="{{ if .Params.url}}{{ .Params.url}}{{else}}{{ .Permalink }}{{end}}">{{ .Title }}</a>
         </h2>
         {{ end }}
-      {{ end }}
+        {{ end }}
 
-      <hr>
-      {{ if .Page.Lastmod }}
-      <div class="last-modified">
+        <hr>
+        {{ if .Page.Lastmod }}
+        <div class="last-modified">
         {{ partial "page-meta-links" . }}
-      </div>
-      {{ end }}
-
-      </main>
+        </div>
+        {{ end }}
 
     </div>
-  </section>
-</section>
+    </section>
 </section>
 </main>
-{{ end }}
 
+
+{{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 24b33318..c52749c6 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,32 +1,19 @@
 {{ define "main" }}
-<div class="docs-container row override-sidebar-collapse">
-  <!-- Replace icons -->
-  {{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
 
-  {{if (.Params.catalog) }}
-  <main class="content content-has-toc" role="main">
-  {{ else if and (gt .WordCount 200 ) (.Params.toc) }}
-  <main class="content col d-block align-top content-has-toc" role="main">
-  {{ else }}
-  <main class="content col d-block align-top content-no-toc" role="main">
-  {{ end }}
-
-  <section class="main-layout">
-    <div class="sidebar-layout" id="sidebar-layout">
-      <button class="sidebar__mobile__toggle" aria-expanded="false" data-mf="true">{{ partial "lucide" (dict "context" . "icon" "x")}}Close</button>
-      <nav data-mf="true" id="sidebar-v2" class="sidebar">
-        {{ partial "sidebar-v2.html" . }}
-      </nav>
-    </div>
+<main class="content">
+    <!-- Replace icons -->
+    {{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
+    <main role="main">
 
+    <section class="main-layout">
     <section id="maincontent" class="content-layout">
-      <div data-cms-edit="content" class="text-content">
-        <section class="breadcrumb-layout wide" data-mf="true" style="display: none;">
-          {{ if not .IsHome }}
+        <div data-cms-edit="content" class="text-content">
+        <section class="breadcrumb-layout wide">
+            {{ if not .IsHome }}
             {{ if not (in .Params.display_breadcrumb "false" ) }}
             {{ partial "breadcrumb" .}}
             {{ end }}
-          {{ end }}
+            {{ end }}
         </section>
         {{ partial "banner" .}}
         <h1>{{ .Title }}</h1>
@@ -38,7 +25,7 @@ <h1>{{ .Title }}</h1>
 
         {{ if .Page.Lastmod }}
         <div class="last-modified">
-          {{ partial "page-meta-links" . }}
+            {{ partial "page-meta-links" . }}
         </div>
         {{ end }}
 
@@ -46,23 +33,22 @@ <h1>{{ .Title }}</h1>
         {{ partial "qualtrics-feedback.html" }}
 
         {{ partial "previous-next-links-in-section-with-title.html" . }}
-        </main>
-        {{ if and (gt .WordCount 200 ) (.Params.toc) }}
-          {{ if (add  (len (findRE "<h3" .Content)) (len (findRE "<h2" .Content))) }}
-            <div id="toc" class="col-md-3 d-none d-xl-block d-print-none nginx-toc align-top">
-            {{ partial "toc.html" . }}
-            </div>
-          {{ end }}
-        {{ end }}
 
-      </div>
+        </main>
+    </section>
     </section>
-  </section>
-</div>
+</main>
+
+
+
 <!-- If there is a script defined in the page metadata, load it  -->
 {{if .Params.script}}
-  {{ $script := (delimit (slice "scripts" .Params.script) "/")}}
-  {{ partial (string $script) .}}
+    {{ $script := (delimit (slice "scripts" .Params.script) "/")}}
+    {{ partial (string $script) .}}
 {{end }}
 
-{{ end }}
\ No newline at end of file
+
+
+
+
+{{ end }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index fe79885f..efb40115 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,33 +1,87 @@
 {{ define "header" }}
-<div class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar navbar-fixed-top">
-  <div class="container-fluid flex-md-row flex-column header-container">
-    <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="NGINX Docs">
-      <img class="navbar-img" src="{{ "/images/icons/NGINX-Docs-horiz-white-type.svg" | absURL }}" alt="NGINX Docs">
-    </a>
+<div class="header-container">
+
+    <div class="header__logo">
+        <a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
+            <img class="header__img" src="{{ "/images/icons/NGINX-Docs-horiz-black-type.svg" | absURL }}" alt="NGINX Docs">
+        </a>
+    </div>
+
+    <div class="header__product-selector">
+        {{ $nginxProducts := slice
+            (dict "title" "NGINX One Console" "url" "/nginx-one" "type" "nginx-one")
+            (dict "title" "NGINX Plus" "url" "/nginx" "type" "nginx-one")
+            (dict "title" "NGINX Instance Manager" "url" "/nginx-instance-manager" "type" "nginx-one")
+            (dict "title" "NGINX Ingress Controller" "url" "/nginx-ingress-controller" "type" "nginx-one")
+            (dict "title" "NGINX Gateway Fabric" "url" "/nginx-gateway-fabric" "type" "nginx-one")
+            (dict "title" "NGINX Open Source" "url" "https://nginx.org/en/docs/" "type" "nginx-one")
+            (dict "title" "NGINX Agent" "url" "/nginx-agent" "type" "nginx-one")
+            (dict "title" "NGINX App Protect WAF" "url" "/nginx-app-protect-waf" "type" "nginx-app-protect")
+            (dict "title" "NGINX App Protect DoS" "url" "/nginx-app-protect-dos" "type" "nginx-app-protect")
+            (dict "title" "NGINX as a Service for Azure" "url" "/nginxaas/azure/" "type" "nginx-as-a-service")
+            (dict "title" "NGINX Unit" "url" "https://unit.nginx.org/" "type" "nginx-other")
+        }}
+        {{ $productMap := dict }}
+        {{ range $nginxProducts }}
+            {{ if not (or (eq .title "NGINX Open Source" ) (eq .title "NGINX Unit")) }}
+              {{ $productId := index (split .url "/") 1 }}
+              {{ $productMap = merge $productMap (dict $productId .title) }}
+            {{ end }}
+        {{ end }}
+        {{ $relPermalink := .RelPermalink }}
+        {{ $productIdentifier := index ((split $relPermalink "/")) 1 }}
+        {{ $productName := index $productMap $productIdentifier | default "Product Documentation" }}
+
+        <button class="product-selector__button" id="product-selector-button">
+            {{/* product name and selector */}}
+            <span class="product-name">{{ $productName }}</span>
+            <span class="product-selector-button-icon">
+                <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M1 13L7 7L0.999999 1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </span>
+        </button>
+        <div class="product-selector" id="product-selector">
+            {{ $groupedProducts := dict
+                "nginx-one" (where $nginxProducts "type" "nginx-one")
+                "nginx-app-protect" (where $nginxProducts "type" "nginx-app-protect")
+                "nginx-as-a-service" (where $nginxProducts "type" "nginx-as-a-service")
+                "nginx-other" (where $nginxProducts "type" "nginx-other")
+            }}
+            {{ $orderedKeys := slice "nginx-one" "nginx-app-protect" "nginx-as-a-service" "nginx-other" }}
+            {{ range $orderedKeys }}
+            {{ $type := . }}
+            {{ $products := index $groupedProducts $type }}
+                <div class="product-selector-content" id="product-selector-content">
+                    <p>{{ $type | humanize | title | upper }}</p>
+                    <ul>
+                    {{ range $products }}
+                        <li>
+                            <a href="{{ .url }}">{{ .title }}</a>
+                        </li>
+                    {{ end }}
+                    </ul>
+                </div>
+            {{ end }}
+        </div>
+
+
+    </div>
+
     {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
-      <div class="navbar navbar-nav">
+      <div class="header__search">
         <!-- Standalone search box. -->
         {{ partial "coveo-atomic-search.html" }}
       </div>
     {{ end }}
-    {{ if ( in .Site.Params.buildtype "package" ) }}
-    <div class="navbar-nav-scroll" id="navbarNavScroll">
-      <ul class="navbar-nav flex-row">
-        <li class="nav-item dropdown active">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Sections
-          </a>
-          {{ partial "products-menu.html" . }}
-        </li>
-      </ul>
-    </div>
-    {{ end }}
-    
-    {{ $f5Sites := slice 
+
+    <div class="header__f5sites">
+    {{ $f5Sites := slice
       (dict "title" "DevCentral" "url" "https://community.f5.com/" "description" "Connect & learn in our hosted community")
       (dict "title" "MyF5" "url" "https://my.f5.com/" "description" "Your key to everything F5, including support, registration keys, and subscriptions")
       (dict "title" "NGINX" "url" "https://nginx.org/" "description" "Learn more about NGINX Open Source and read the community blog")
     }}
+
     <ul class="navbar navbar-nav">
         <li class="nav-item-explore active">
           <button id="navbar-sites-button" class="button navbar-button">
@@ -46,7 +100,7 @@
           </div>
         </li>
     </ul>
-  </div>
-</div>
 
+    </div>
+</div>
 {{ end }}
diff --git a/layouts/partials/sidebar-v2.html b/layouts/partials/sidebar-v2.html
index cf628c63..fe77a479 100644
--- a/layouts/partials/sidebar-v2.html
+++ b/layouts/partials/sidebar-v2.html
@@ -1,4 +1,4 @@
-{{ $nginxProducts := slice 
+{{ $nginxProducts := slice
     (dict "title" "NGINX One Console" "url" "/nginx-one" "type" "nginx-one")
     (dict "title" "NGINX Plus" "url" "/nginx" "type" "nginx-one")
     (dict "title" "NGINX Instance Manager" "url" "/nginx-instance-manager" "type" "nginx-one")
@@ -22,6 +22,11 @@
 {{ $productName := index $productMap $productIdentifier }}
 
 <div class="sidebar__container">
+    <div class="sidebar__header">
+        <a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
+            <img class="sidebar__img" src="{{ "/images/icons/NGINX-Docs-horiz-black-type.svg" | absURL }}" alt="NGINX Docs">
+        </a>
+    </div>
     <div class="sidebar__content">
         <a class="skip-link" href="#maincontent">Skip Navigation</a>
         {{ partial "sidebar-list.html" (dict
@@ -31,4 +36,4 @@
         "idPrefix" ""
       ) }}
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/layouts/redoc/single.html b/layouts/redoc/single.html
index 43966f77..2451793d 100644
--- a/layouts/redoc/single.html
+++ b/layouts/redoc/single.html
@@ -1,92 +1,14 @@
 {{ define "main" }}
 
-<!-- Remove upon cleaning up old frame code -->
-<style>
-  .nginx-docs-api-container {
-    z-index: 0 !important;
-    max-width: calc(100% + 2.4rem);
-    margin-top: 2rem;
-  }
+<main class="content content__redocly">
+    <div id="api-component">{{ .Content}}</div>
+</main>
 
-  @media (min-width: 768px) {
-    .nginx-docs-api-container {
-      z-index: 0 !important;
-      max-width: calc(75% + 2.4rem);
-    }
-  }
+<!-- If there is a script defined in the page metadata, load it  -->
+{{if .Params.script}}
+    {{ $script := (delimit (slice "scripts" .Params.script) "/")}}
+    {{ partial (string $script) .}}
+{{end }}
 
-  html {
-    scroll-behavior: auto !important;
-  }
-
-  .menu-content {
-    top: 0 !important;
-    height: 100vh !important;
-  }
-  .bCOLCR {
-    background: #e6e6e6;
-  }
-  .fTsuzH {
-    background-color: #e6e6e6;
-  }
-  .fgRoXk {
-    background-color: #fafafa;
-  }
-  #api-component > api-container > redoc {
-    background-color: #e6e6e6;
-  }
-  div.sc-jSFjdj.sc-gKAaRy.dYGhuI.fTsuzH > div > h3 {
-    color: #000000;
-  }
-  div.sc-dvUynV.fgRoXk.redoc-wrap {
-    margin-left: -15px;
-    margin-right: -15px;
-  }
-  .gKPxXE .collapser {
-    background-color: transparent !important;
-  }
-  div
-    > div.sc-jSFjdj.sc-gKAaRy.dYGhuI.fTsuzH
-    > div.sc-EZqKI.iONckA
-    > button:hover {
-    background-color: #003963;
-  }
-  div > div.sc-giAqHp.hIuvjA > button:hover {
-    color: #003963;
-  }
-  .nginx-docs-api-container button:hover {
-    background-color: rgb(237, 237, 237);
-  }
-  pre {
-    white-space: pre-wrap;
-  }
-</style>
-<!--Use wide page layout for the API reference pages-->
-<section class="main-layout api">
-  <div class="sidebar-layout">
-    <nav id="sidebar-v2" class="sidebar">
-      {{ partial "sidebar-v2.html" . }}
-    </nav>
-  </div>
-  <div
-    class="row flex-md-nowrap content-layout"
-    style="
-      position: relative;
-      flex-wrap: nowrap;
-      margin-right: 9px;
-      max-width: calc(100% + 9px);
-    "
-  >
-    <section class="breadcrumb-layout">
-      {{ if not .IsHome }}
-        {{ if not (in .Params.display_breadcrumb "false" ) }}
-        {{ partial "breadcrumb" .}}  
-        {{ end }}
-      {{ end }}
-    </section>
-    <div class="nginx-docs-api-container">
-      <div id="api-component">{{ .Content}}</div>
-    </div>
-  </section>
-  </div>
+</div>
 {{ end }}
diff --git a/layouts/search/single.html b/layouts/search/single.html
index 9d2e1cd1..cbab6a2f 100644
--- a/layouts/search/single.html
+++ b/layouts/search/single.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-<section class="main-layout" style="margin-left: 2rem;" >
+<section class="search" style="margin-left: 2rem;" >
   {{ partial "coveo-atomic.html" .}}
 </section>
 {{ end }}
diff --git a/layouts/shortcodes/card-layout.html b/layouts/shortcodes/card-layout.html
index 77f8f58e..e5337167 100644
--- a/layouts/shortcodes/card-layout.html
+++ b/layouts/shortcodes/card-layout.html
@@ -1,2 +1,2 @@
 <!-- Render the main content first with modifications, then render the custom content -->
-<div class="card-layout">{{ .Inner | markdownify }}</div>
\ No newline at end of file
+<div class="card-layout">{{- .Inner | markdownify -}}</div>