diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 354daa6b..5870edc7 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -16,7 +16,12 @@
     --color-background: #FFFFFF;
     --color-foreground: #000000;
     --color-shadow: #D2D2D2;
+    --color-product-title: #8D8D8D;
 
+    --sidebar-margin: 3rem;
+    --sidebar-line-box-side-length: 0.5rem;
+    --sidebar-line-box-top: 0.375rem;
+    --sidebar-line-box-left: 0.75rem;
     --sidebar-width: 24rem;
     --side-gutter-width: 20rem;
     --text-content-width-iphone-13: 30rem;
@@ -30,7 +35,6 @@
 @supports (font-variation-settings: normal) {
     :root {
         font-family: InterVariable, sans-serif;
-        font-variation-settings: 'wght' 350;
     }
 
     h1, h2, h3, h4, h5, h6, .breadcrumb {
@@ -43,6 +47,11 @@ h1, h2, h3, h4, h5, h6, .breadcrumb {
 }
 
 /* header */
+p {
+    font-weight: 400;
+}
+
+/* layout */
 header {
     margin: 2rem 2rem;
 
@@ -110,6 +119,90 @@ nav {
     }
 }
 
+/* main content */
+.docs-container * {
+    box-sizing: border-box;
+}
+
+.content-layout {
+    display: grid;
+    grid-template-columns: var(--text-content-width-iphone-13) var(--side-gutter-width); 
+    column-gap: var(--component-gap);
+}
+
+.docs-container {
+    min-width: 100%;
+}
+
+.main-layout {
+    display: grid;
+    grid-template-columns: 1fr;
+}
+
+.sidebar-layout {
+    display: flex;
+    flex-direction: column;
+    z-index: 9999;
+}
+
+@media (max-width: 1512px){
+    .sidebar-layout {
+        display: none;
+    }
+}
+
+.text-content {
+    grid-column-start: 1;
+}
+
+@media (min-width: 1512px) { /* Macbook Pro 14 */
+    .main-layout {
+        display: grid;
+        grid-template-columns: var(--sidebar-width) 1fr;
+        column-gap: var(--component-gap);
+    }
+
+    .content-layout {
+        display: grid;
+        grid-template-columns: var(--text-content-width-mbp-14) var(--side-gutter-width); 
+        column-gap: var(--component-gap);
+    }
+
+    .content-layout .side-gutter {
+        grid-column-start: 2;
+    }
+
+    .base-layout {
+        display: grid;
+        grid-template-rows: repeat(2, auto);
+        column-gap: var(--component-gap);
+    }
+
+    .breadcrumb-layout {
+        display: grid;
+        grid-template-columns: var(--sidebar-width) 1fr;
+        column-gap: var(--component-gap);
+        align-items: center;
+        margin: 0 2rem;
+    }
+}
+
+@media (min-width: 1728px) { /* Macbook Pro 16 */
+    .content-layout {
+        display: grid;
+        grid-template-columns: var(--text-content-width-mbp-16) var(--side-gutter-width); 
+        column-gap: var(--component-gap);
+    }
+}
+
+@media (min-width: 2560px) { /* 4k Desktop */
+    .content-layout {
+        display: grid;
+        grid-template-columns: var(--text-content-width-4k-display) var(--side-gutter-width); 
+        column-gap: var(--component-gap);
+    }
+}
+
 #searchbox {
     width: 24rem;
     display:none;
@@ -201,9 +294,204 @@ nav {
 }
 
 .sidebar {
-    flex-basis: 1;
-    width: 20rem;
-    margin: 2rem 0;
+    display: flex;
+    flex-direction: column;
+    width: 24rem;
+    position: sticky;
+    top: 0;
+}
+
+.sidebar .product-selector-button {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color:  var(--color-brand);
+    color: var(--color-brand-100);
+    border: none;
+    font-weight: 500;
+    font-size: 1.25rem;
+    width: 100%;
+    padding: 0.5rem;
+    cursor: pointer;
+}
+
+.sidebar .product-selector-button .selector-icon {
+    height:24px;
+    width: 24px;
+}
+
+.product-selector {
+    display: none;
+    position: absolute;
+    top: 0;
+    min-width: 80%;
+    margin-left: 46rem;
+    padding: 0.75rem;
+    background-color: white;
+    border: black 1px solid;
+    box-shadow: 3px 3px 0px var(--color-shadow);
+}
+
+.product-selector p {
+    font-size: 0.75rem;
+    color: var(--color-product-title);
+    display: inline;
+}
+
+.product-selector ul {
+    padding-left: 0;
+    margin-top: 0;
+    list-style-type: none;
+}
+
+.product-selector a {
+    text-decoration: none;
+    color: black;
+    font-size: 1rem;
+}
+
+.sidebar .sidebar-navigation {
+    width: 100%;
+    font-weight: 500;
+    margin-left: var(--sidebar-margin);
+}
+
+/* removes the built in ul padding/margin */
+.sidebar .sidebar-navigation ul {
+   margin-left: 0;
+   padding-left: 0;
+   list-style-type: none;
+}
+
+.sidebar ul :not(.sidebar-navigation) ul {
+    padding-left: 1rem;
+}
+
+.sidebar .sidebar-navigation li {
+    margin-bottom: 1rem;
+}
+
+.sidebar .sidebar-navigation a {
+    text-decoration: none;
+    color: black;
+}
+
+.sidebar .sidebar-navigation .collapsible-header {
+    cursor: pointer;
+}
+
+.sidebar .sidebar-navigation .collapsible-content {
+    display: none;
+    position: relative;
+}
+
+.sidebar .sidebar-navigation .box.opened {
+    display: none;
+}
+
+.toggle-checkbox:checked ~ .collapsible-header .box.expand {
+    display: none; 
+}
+
+.toggle-checkbox:checked ~ .collapsible-content {
+    display: block;
+}
+
+.toggle-checkbox:checked ~ .collapsible-header .box.opened {
+    display: block;
+}
+
+/* Every other Sidebar Partial Vertical Line */
+.toggle-checkbox:checked ~ .collapsible-content::before {
+    content: '';
+    position: absolute;
+    border-left: black 1px solid;
+    left: -0.525rem;
+    top: -1.33rem;
+    height: calc(100% + 0.78rem);
+}
+
+/* Every other Sidebar Partial Horizontal Lines */
+.toggle-checkbox:checked ~ .collapsible-content li {
+    position: relative;
+}
+
+.toggle-checkbox:checked ~ .collapsible-content li::after {
+    content: '';
+    position: absolute;
+    border-top: black 1px solid;
+    left: -1.5rem;
+    width: 0.75rem; 
+    top: 0.6rem; 
+}
+
+.selected {
+    font-weight: 800;
+}
+
+.sidebar .sidebar-navigation li:first-child {
+    margin-top: 1rem;
+}
+
+.sidebar .sidebar-navigation ul li .box-link {
+    content: '';
+    background-color: black;
+    position: absolute;
+    width: 0.1rem;
+    height: var(--sidebar-line-box-side-length);  
+    margin-top: var(--sidebar-line-box-top);
+    left: var(--sidebar-line-box-left);
+}
+
+.sidebar .sidebar-navigation ul li .box { 
+    content: '';
+    position: absolute;
+    width: var(--sidebar-line-box-side-length);
+    height: var(--sidebar-line-box-side-length);  
+    margin-top: var(--sidebar-line-box-top);
+    left: var(--sidebar-line-box-left);
+}
+
+.sidebar .sidebar-navigation ul li .expand { 
+    background-color: black;
+}
+
+.sidebar .sidebar-navigation ul li .opened { 
+    border: black 1px solid;
+}
+
+.sidebar .sidebar-navigation ul li .current { 
+    background-color: var(--color-brand);
+    z-index: 999;
+}
+
+.sidebar .sidebar-navigation ul li .partial-box {
+    margin-left: -1.5rem;
+}
+
+.sidebar .sidebar-navigation ul li .partial {
+    left: -0.8125rem;
+}
+
+/* First Sidebar Nav Vertical Line */
+.sidebar .sidebar-navigation .parent-collapsible-content::before{
+    content: '';
+    position: absolute;
+    border-left: black 1px solid;
+    left: 0;
+    bottom: 1.55rem;
+    height: calc(100% - 5.65rem);
+}
+
+/* First Sidebar Nav Horizontal Lines */
+.sidebar .sidebar-navigation .parent-collapsible-content .parent-collapsible-content-item::before, 
+.sidebar .sidebar-navigation .parent-collapsible-content .parent-collapsible-content-item::after {
+    content: '';
+    position: absolute;
+    border-top: black 1px solid;
+    left: 0;
+    margin-top: 0.6rem;
+    width: 0.75rem; 
 }
 
 .row {
@@ -214,6 +502,7 @@ nav {
 
 /* content */
 main {
+    flex: 1;
     max-width: 50rem;
     min-width: 40rem;
     margin: 2rem 2rem;
@@ -313,6 +602,16 @@ pre.chroma {
     width: 156px;
 }
 
+.f5-logo-footer {
+    height: 32px;
+    width: 32px;
+}
+
+.nginx-logo-footer {
+    height: 72x;
+    width: 156px;
+}
+
 /* FILTHY HACKS BEGIN */
 
 /* Override logo with black text version */
@@ -326,6 +625,9 @@ pre.chroma {
     background-size: contain;
     background-position: left center;
     width: 200px; /* Adjust the width as needed to fit the logo */
+    background-size: contain;
+    background-position: left center;
+    width: 200px; /* Adjust the width as needed to fit the logo */
 
     img {
         display: none;
diff --git a/assets/js/product-selector.js b/assets/js/product-selector.js
new file mode 100644
index 00000000..c1608774
--- /dev/null
+++ b/assets/js/product-selector.js
@@ -0,0 +1,17 @@
+$(document).ready(function () {
+    const productSelectorContent = document.getElementById("product-selector");
+
+    $("#product-selector-button").on("click", () => {
+        if (productSelectorContent.style.display === "block") {
+            productSelectorContent.style.display = "none";
+        } else {
+            productSelectorContent.style.display = "block";
+        }
+    });
+
+    window.onclick = function(event) {
+        if (!event.target.matches('#product-selector-button') && !event.target.matches('#product-selector-button-icon')) {
+            productSelectorContent.style.display = "none"
+        }
+    }
+})
\ No newline at end of file
diff --git a/assets/js/product-dropdown.js b/assets/js/site-dropdown.js
similarity index 100%
rename from assets/js/product-dropdown.js
rename to assets/js/site-dropdown.js
diff --git a/layouts/_default/docs.html b/layouts/_default/docs.html
index ad231f18..dfe47643 100644
--- a/layouts/_default/docs.html
+++ b/layouts/_default/docs.html
@@ -1,8 +1,10 @@
 {{ define "main" }}
+<div class="docs-container row override-sidebar-collapse">
 <div class="docs-container row override-sidebar-collapse">
   <nav id="sidebar" class="sidenav overflow-auto col-md-3 d-none d-xl-block d-print-none align-top">
     {{ partial "sidebar.html" . }}
   </nav>
+
   
   {{if (.Params.catalog) }}
   <main class="content content-has-toc" role="main">
@@ -13,9 +15,9 @@
   {{ end }}
     
   <section class="main-layout">
-    <div class="sidebar-container">
-      <nav data-mf="true" id="sidebar-v2" class="sidebar-v2" style="display:none;">
-        Sidebar placeholder
+    <div class="sidebar-layout">
+      <nav data-mf="true" id="sidebar-v2" class="sidebar" style="display:none;">
+        {{ partial "sidebar-v2.html" . }}
       </nav>
     </div>
 
@@ -50,6 +52,19 @@ <h1>{{ .Title }}</h1>
       </div>
     </section>
   </section>
+        {{ 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>
+    </section>
+  </section>
 
 </div>
 <!-- If there is a script defined in the page metadata, load it  -->
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index f83d1c1c..81262387 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -61,6 +61,10 @@
 <script src="{{ $jsThemeSwitcher.RelPermalink }}" type="text/javascript"
   integrity="{{ $jsThemeSwitcher.Data.Integrity }}"></script>
   
-<!-- Load Product Dropdown javascript -->
-{{ $jsProductDropdown := resources.Get "js/product-dropdown.js" | minify | fingerprint "sha512" }}
-<script src="{{ $jsProductDropdown.RelPermalink }}" type="text/javascript" integrity="{{ $jsProductDropdown.Data.Integrity }}"></script>
+<!-- Load Site Dropdown javascript -->
+{{ $jsSiteDropdown := resources.Get "js/site-dropdown.js" | minify | fingerprint "sha512" }}
+<script src="{{ $jsSiteDropdown.RelPermalink }}" type="text/javascript" integrity="{{ $jsSiteDropdown.Data.Integrity }}"></script>
+
+<!-- Load Product Selector javascript -->
+{{ $jsProductSelector := resources.Get "js/product-selector.js" | minify | fingerprint "sha512" }}
+<script src="{{ $jsProductSelector.RelPermalink }}" type="text/javascript" integrity="{{ $jsProductSelector.Data.Integrity }}"></script>
diff --git a/layouts/partials/sidebar-list-pages.html b/layouts/partials/sidebar-list-pages.html
new file mode 100644
index 00000000..b221b252
--- /dev/null
+++ b/layouts/partials/sidebar-list-pages.html
@@ -0,0 +1,26 @@
+{{ $currentUrl := .currentUrl }}
+{{ $context := .context }}
+<ul class="collapsible-content">
+    {{ range $context.Pages.ByWeight }}
+    <li>
+        {{ if eq .Kind "section" }}
+            <input type="checkbox" id="toggle-{{ .File.UniqueID }}" class="toggle-checkbox" style="display: none;">
+            <label for="toggle-{{ .File.UniqueID }}" class="collapsible-header">
+                {{ if .Pages }}
+                    <span class="box expand partial-box"></span>
+                    <span class="box opened partial-box"></span>
+                {{ end }}
+                {{ .Title }} 
+            </label>
+            {{ partial "sidebar-list-pages.html" (dict "context" . "currentUrl" $currentUrl) }}
+        {{ else if eq .Kind "page" }}
+            {{ if eq $currentUrl .Permalink }}                      
+                <span class="box current partial"></span>                 
+            {{ else }}                     
+                <span class="box-link partial"></span>              
+            {{ end }}
+            <a href="{{ .Permalink }}" style="{{if eq $currentUrl .Permalink}}font-weight: bold;{{end}}">{{ .Title }} </a>
+        {{ end }}
+    </li>
+    {{ end }}
+</ul>
\ No newline at end of file
diff --git a/layouts/partials/sidebar-v2.html b/layouts/partials/sidebar-v2.html
new file mode 100644
index 00000000..894e5442
--- /dev/null
+++ b/layouts/partials/sidebar-v2.html
@@ -0,0 +1,72 @@
+
+<button class="product-selector-button" id="product-selector-button">
+    {{/* product name and selector */}}
+    <div class="product-name">NGINX Plus</div>
+    <div 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="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>     
+    </div>
+</button>
+<div class="product-selector" id="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")
+    }}
+    {{ $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 }}" target="_blank">{{ .title }}</a>
+                </li>
+            {{ end }}
+            </ul>
+        </div>
+    {{ end }}
+</div>
+<div class="sidebar-navigation">
+    <ul class="parent-collapsible-content">
+    {{ range .FirstSection.Pages.ByWeight }}
+        <li class="parent-collapsible-content-item">
+            {{ if eq .Kind "section" }}
+                <input type="checkbox" id="toggle-{{ .File.UniqueID }}" class="toggle-checkbox" style="display: none;">
+                <label for="toggle-{{ .File.UniqueID }}" class="collapsible-header">
+                    {{ if .Pages }}
+                        <span class="box expand"></span>
+                        <span class="box opened"></span>
+                    {{ end }}
+                    {{ .Title }} 
+                </label>
+                {{ partial "sidebar-list-pages.html" (dict "context" . "currentUrl" $.Permalink) }}
+            {{ else if eq .Kind "page" }}
+                {{ if eq $.Permalink .Permalink }}                      
+                    <span class="box current"></span>                 
+                {{ else }}                     
+                    <span class="box-link"></span>              
+                {{ end }}
+                <a href="{{ .Permalink }}">{{ .Title }} </a> 
+            {{ end }}
+        </li>
+    {{ end }}
+    </ul>
+</div>