diff --git a/themes/geekboot/assets/scss/_navbar.scss b/themes/geekboot/assets/scss/_navbar.scss
index 5cd59268..4b934964 100644
--- a/themes/geekboot/assets/scss/_navbar.scss
+++ b/themes/geekboot/assets/scss/_navbar.scss
@@ -1,133 +1,23 @@
-.bd-navbar {
+.docs-navbar {
   box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
-  height: 72px;
+  height: 80px;
   background: $navbar-background-color;
+  min-height: 80px;
+  padding-left: 24px;
+  padding-right: 24px;
 
-  @media (min-width: 993px) and (max-width: 1090px){
-
-    .icons {
-      white-space: nowrap;
-      flex-direction: column;
-      padding-right: 0 !important;
-
-      .slack-icon,
-      .github-icon {
-        padding-left: 0 !important;
-        padding-right: 0 !important;
-        padding-top: 0 !important;
-        padding-bottom: 0 !important;
-      }
-    }
-
-    .color-switcher {
-      .form-check {
-        white-space: nowrap;
-        flex-direction: column;
-        padding-right: 0 !important;
-
-        .form-check-input {
-          padding-bottom: 2px;
-        }
-
-        .form-check-label {
-          padding-right: 0px !important;
-          padding-left: 0px !important;
-        }
-      }
-    }
-  }
-
-
-  .form-check-input,
-  .form-switch,
-  .form-check{
-    margin-left: 0;
-    padding-left: 0;
-  }
-
-  .container-xxl {
-    max-width: none;
-    padding-left: 18px;
-    padding-right: 18px;
-  }
-
-  .bd-navbar-toggle {
-    @include media-breakpoint-down(lg) {
-      width: 4.25rem;
-    }
-  }
-
-  .navbar-toggler {
-    padding: 0;
-    margin-right: -.5rem;
-    border: 0;
-
-    &:first-child {
-      margin-left: -.5rem;
-    }
-
-    .bi {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
-
-    &:focus {
-      box-shadow: none;
-    }
-  }
-
-  .navbar-brand {
-    transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
-    padding: 16px;
-    img {
-      color:transparent;
-      width:152px;
-      height:auto;
-    }
-  }
-
-  .navbar-toggler,
-  .nav-link {
-    // padding-right: $spacer * .25;
-    // padding-left: $spacer * .25;
-    color: rgba($white, .85);
-
-    &:hover,
-    &:focus {
-      color: $white;
-    }
-
-    &.active {
-      font-weight: 600;
-      color: $white;
-    }
-  }
-
-  .navbar-nav-svg {
-    display: inline-block;
-    vertical-align: -.125rem;
-  }
-
-  .offcanvas-title {
-    color: $navbar-link-color;
-    font-size: 24px;
-  }
-
-  .offcanvas-lg {
-    border-left: 0;
-    background: $navbar-background-color;
-
-    @include media-breakpoint-down(lg) {
-      box-shadow: $box-shadow-lg;
+  .navbar-icons{
+    svg {
+      height: 24px;
+      width: 24px;
     }
   }
 
   .navbar-link {
     color: $navbar-link-color;
     font-size: $navbar-link-font-size;
-    opacity: .85;
-    letter-spacing: 1.1px;
     text-decoration: none;
+    letter-spacing: normal;
 
     &:hover {
       opacity: 1.5;
@@ -135,4 +25,142 @@
       color: $navbar-link-color-hover;
     }
   }
+
+
+  @media (min-width: 993px) and (max-width: 1090px){
+
+    // .icons {
+    //   white-space: nowrap;
+    //   flex-direction: column;
+    //   padding-right: 0 !important;
+
+    //   .slack-icon,
+    //   .github-icon {
+    //     padding-left: 0 !important;
+    //     padding-right: 0 !important;
+    //     padding-top: 0 !important;
+    //     padding-bottom: 0 !important;
+    //   }
+    // }
+
+    // .color-switcher {
+    //   .form-check {
+    //     white-space: nowrap;
+    //     flex-direction: column;
+    //     padding-right: 0 !important;
+
+    //     .form-check-input {
+    //       padding-bottom: 2px;
+    //     }
+
+    //     .form-check-label {
+    //       padding-right: 0px !important;
+    //       padding-left: 0px !important;
+    //     }
+    //   }
+    // }
+  }
+
+  // Mobile View
+  @include media-breakpoint-down(lg) {
+
+    .offcanvas-lg{
+      border: none;
+    }
+
+    .offcanvas-body{
+      background: $navbar-background-color;
+      padding: 24px !important;
+    }
+
+    .offcanvas-header{
+      min-height: initial !important;
+
+      .btn-close{
+        opacity: 1 !important;
+      }
+
+    }
+
+    .navbar-toggler{
+      color: white;
+    }
+
+    .navbar-brand{
+      width: initial !important;
+    }
+
+
+    .navbar-center-links{
+      padding-top: 3rem;
+
+      .nav-item{
+        padding-bottom: 1rem;
+
+        .navbar-link{
+          font-size: 20px;
+        }
+      }
+
+    }
+
+    .navbar-icons{
+      padding-top: 2rem !important;
+
+      .nav-item{
+        padding-bottom: 1rem !important;
+      }
+
+      .icon-label{
+        display: inline !important;
+        padding-left: 1rem;
+      }
+    }
+
+    .vr{
+      display: none !important;
+    }
+
+  }
+
+  // Desktop View
+  @include media-breakpoint-up(lg) {
+    .offcanvas{
+      display: none;
+    }
+
+    .navbar-center-links {
+      padding-bottom: 1px !important; //nudge to match www
+      margin-left: -2px;
+
+      .nav-item a{
+        padding-left: 16px;
+        padding-right: 16px;
+      }
+
+    }
+
+    .navbar-icons{
+      min-width: 375px;
+
+      .icon-label{
+        display: none;
+      }
+
+      svg {
+        height: 24px;
+        width: 24px;
+      }
+    }
+
+    .navbar-brand{
+      width: 100%;
+      max-width: 375px;
+      padding-bottom: 9px !important; //nudge to match www
+      padding-top: 0px !important;
+    }
+
+
+  }
+
 }
diff --git a/themes/geekboot/layouts/_default/list.html b/themes/geekboot/layouts/_default/list.html
index 5ac53b9a..f243dd17 100644
--- a/themes/geekboot/layouts/_default/list.html
+++ b/themes/geekboot/layouts/_default/list.html
@@ -4,7 +4,7 @@
       <div class="offcanvas-lg offcanvas-start bd-sidebar-container" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
         <div class="offcanvas-header pb-4 border-bottom">
           <div class="d-flex offcanvas-title fw-bold" id="bdNavbarOffcanvasLabel">
-            Crossplane {{ if ne .Page.Params.version "master" }}v{{ end }}{{.Page.Params.version}} Documentation
+            Crossplane Documentation - {{ if ne .Page.Params.version "master" }}v{{ end }}{{.Page.Params.version}}
           </div>
           <div class="d-flex"><button type="button" class="btn-close bi align-self-center p-0" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button></div>
         </div>
diff --git a/themes/geekboot/layouts/_default/single.html b/themes/geekboot/layouts/_default/single.html
index 5ac53b9a..f243dd17 100644
--- a/themes/geekboot/layouts/_default/single.html
+++ b/themes/geekboot/layouts/_default/single.html
@@ -4,7 +4,7 @@
       <div class="offcanvas-lg offcanvas-start bd-sidebar-container" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
         <div class="offcanvas-header pb-4 border-bottom">
           <div class="d-flex offcanvas-title fw-bold" id="bdNavbarOffcanvasLabel">
-            Crossplane {{ if ne .Page.Params.version "master" }}v{{ end }}{{.Page.Params.version}} Documentation
+            Crossplane Documentation - {{ if ne .Page.Params.version "master" }}v{{ end }}{{.Page.Params.version}}
           </div>
           <div class="d-flex"><button type="button" class="btn-close bi align-self-center p-0" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button></div>
         </div>
diff --git a/themes/geekboot/layouts/partials/docs-navbar.html b/themes/geekboot/layouts/partials/docs-navbar.html
index e9699ebf..a447ae73 100644
--- a/themes/geekboot/layouts/partials/docs-navbar.html
+++ b/themes/geekboot/layouts/partials/docs-navbar.html
@@ -1,79 +1,170 @@
-<header class="navbar navbar-expand-lg bd-navbar  sticky-top">
-  <nav class="container-xxl w-100 bd-gutter flex-wrap flex-lg-nowrap justify-content-between" aria-label="Main navigation">
-    <div class="bd-navbar-toggle">
-      <button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
-        {{ partialCached "icons/hamburger.svg" (dict "class" "bi" "width" "24" "height" "24") }}
-        <span class="d-none fs-6 pe-1">Browse</span>
-      </button>
-    </div>
-    <a class="navbar-brand" href="https://www.crossplane.io" aria-label="Bootstrap">
+<header class="navbar docs-navbar navbar-expand-lg sticky-top py-0 align-items-center">
+
+  <div class="docs-left-toggle">
+    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"
+    data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs content">
+      {{ partialCached "icons/hamburger.svg" (dict "class" "" "width" "1.5rem" "height" "1.5rem") }}
+      <span class="d-none fs-6 pe-1">Browse</span>
+    </button>
+  </div>
+
+  <div class="docs-right-toggle order-3">
+    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"
+    data-bs-target="#offcanvas" aria-controls="offcanvas" aria-label="Toggle Crossplane navigation">
+      <svg class="bi white" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
+    </button>
+  </div>
+
+  <div class="navbar-brand">
+    <a href="https://www.crossplane.io" aria-label="Crossplane">
       <img
       src="/img/crossplane-logo.svg"
       alt="Crossplane logo"
       srcset="/img/crossplane-logo.svg 1x, /img/crossplane-logo.svg 2x"
-      width="185"
-      height="40"
+      width="152px"
       decoding="async"
       data-nimg="future"
       loading="lazy">
     </a>
+  </div>
 
-    <div class="d-flex">
-      <button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
-        <svg class="bi white" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
-      </button>
-    </div>
+  <div class="w-100 offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
 
-    <div class="offcanvas-lg offcanvas-end flex-grow-1 w-100" tabindex="-1" id="bdNavbar" aria-labelledby="CrossplaneLogo" data-bs-scroll="true">
-      <div class="offcanvas-header px-4 pb-0">
-        <div class="offcanvas-title fw-bold" id="CrossplaneLogo">
-          <img src="/img/popsicle-icon.svg" alt="Crossplane popsicle logo" height="40" width="185" decoding="async" loading="lazy" /> Crossplane
+    <div class="offcanvas-body p-0">
+
+      <div class="offcanvas-header p-0">
+        <div class="navbar-brand">
+          <a href="https://www.crossplane.io" aria-label="Crossplane">
+            <img
+            src="/img/crossplane-logo.svg"
+            alt="Crossplane logo"
+            srcset="/img/crossplane-logo.svg 1x, /img/crossplane-logo.svg 2x"
+            width="152px"
+            decoding="async"
+            data-nimg="future"
+            loading="lazy">
+          </a>
         </div>
-        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
+        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#offcanvas"></button>
       </div>
 
-      <div class="offcanvas-body p-4 pt-0 p-lg-0">
-        <hr class="d-lg-none text-white-50">
-        <ul class="navbar-nav vstack bd-navbar-nav align-items-center justify-content-center">
-          <li class="nav-item text-center">
-            <a class="p-3 navbar-link" href="https://www.crossplane.io/why-control-planes">Why Control Planes?</a>
+
+      <div class="navbar-center-links collapse navbar-collapse justify-content-evenly show">
+        <ul class="navbar-nav align-items-center ">
+          <li class="nav-item">
+            <a class="navbar-link" href="https://www.crossplane.io/why-control-planes">Why Control Planes?</a>
           </li>
           <li class="nav-item">
-            <a class="p-3 navbar-link"  aria-current="page" href="https://docs.crossplane.io">Documentation</a>
+            <a class="navbar-link"  aria-current="page" href="https://docs.crossplane.io">Documentation</a>
           </li>
           <li class="nav-item">
-            <a class="p-3 navbar-link"  href="https://www.crossplane.io/community">Community</a>
+            <a class="navbar-link"  href="https://www.crossplane.io/community">Community</a>
           </li>
           <li class="nav-item">
-            <a class="p-3 navbar-link"  href="https://blog.crossplane.io/">Blog</a>
+            <a class="navbar-link"  href="https://blog.crossplane.io/">Blog</a>
           </li>
         </ul>
+      </div>
 
-        <hr class="d-lg-none text-white-50">
+      <div class="navbar-icons flex-shrink-1 show">
+          <ul class="navbar-nav">
+            <li class="nav-item col-xs p-2">
+              <a class="navbar-link" href="https://github.com/crossplane" title="Crossplane Github Repository" target="_blank" rel="noopener">
+                {{ partialCached "icons/github.svg" .}} <span class="icon-label">Crossplane GitHub</span>
+              </a>
+            </li>
 
-        <div class="d-flex align-items-center justify-content-evenly">
-          <div class="icons d-flex">
-            <a class="github-icon nav-link py-2 px-0 px-lg-2" href="https://github.com/crossplane" target="_blank" rel="noopener">
-              {{ partialCached "icons/github.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
-              <small class="d-lg-none ms-2">Crossplane GitHub</small>
-            </a>
+            <li class="nav-item col-xs p-2">
+              <a class="navbar-link" href="https://slack.crossplane.io" title="Join the Crossplane Slack" target="_blank" rel="noopener">
+                {{ partialCached "icons/slack.svg" . }} <span class="icon-label">Crossplane Slack</span>
+              </a>
+            </li>
 
-            <a class="slack-icon nav-link py-2 px-0 px-lg-2" href="https://slack.crossplane.io" target="_blank" rel="noopener">
-              {{ partialCached "icons/slack.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
-              <small class="d-lg-none ms-2">Crossplane Slack</small>
-            </a>
-          </div>
+            <li class="nav-item col-x p-2">
+              <div class="vr d-lg-flex mx-lg-2 text-white"></div>
+            </li>
 
-          <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
-          <hr class="d-lg-none text-white-50">
-
-          <div class="color-switcher">
-            <div class="navbar-link form-check form-switch d-flex align-items-center pe-3" >
-              <input class="d-flex form-check-input" type="checkbox" id="darkSwitch" />
-              <label class="d-flex form-check-label ps-3" for="darkSwitch">Dark Mode</label>
-            </div>
-          </div>
-        </div>
+            <li class="nav-item col-xs p-2">
+              <div class="form-check form-switch color-switcher" >
+                <input class="d-flex form-check-input" type="checkbox" id="darkSwitch" />
+                <label class="d-flex navbar-link form-check-label" for="darkSwitch">Dark Mode</label>
+              </div>
+            </li>
+          </ul>
+      </div>
     </div>
-  </nav>
-</header>
+  </div>
+
+  <!-- Offcanvas section is a duplicate of the standard display.
+    It's much easier and more obvious to duplicate the content instead of
+    working with a single offcanvas style and modifying the visible elements -->
+    <!-- <div class="offcanvas w-100 off canvas-lg offcanvas-end" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
+
+      <div class="offcanvas-header">
+          <a href="https://www.crossplane.io" class="offcanvas-title position-relative top-50 start-50 translate-middle" aria-label="Crossplane">
+          <img
+          src="/img/crossplane-logo.svg"
+          alt="Crossplane logo"
+          srcset="/img/crossplane-logo.svg 1x, /img/crossplane-logo.svg 2x"
+          width="185"
+          height="40"
+          decoding="async"
+          data-nimg="future"
+          loading="lazy"></a>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#offcanvas"></button>
+      </div>
+      <div class="offcanvas-body float-end">
+        <div>
+          <hr class="d-lg-none text-white-50">
+        </div>
+
+        <div class="offcanvas-center-links">
+          <ul class="navbar-nav align-items-center">
+            <li class="nav-item p-2">
+              <a class="navbar-link" href="https://www.crossplane.io/why-control-planes">Why Control Planes?</a>
+            </li>
+            <li class="nav-item p-2">
+              <a class="navbar-link"  aria-current="page" href="https://docs.crossplane.io">Documentation</a>
+            </li>
+            <li class="nav-item p-2">
+              <a class="navbar-link"  href="https://www.crossplane.io/community">Community</a>
+            </li>
+            <li class="nav-item p-2">
+              <a class="navbar-link"  href="https://blog.crossplane.io/">Blog</a>
+            </li>
+          </ul>
+        </div>
+
+        <div>
+          <hr class="d-lg-none text-white-50">
+        </div>
+
+        <div class="offcanvas-icons">
+          <ul class="justify-content-center">
+            <li class="p-2">
+              <a class="navbar-link d-flex" href="https://github.com/crossplane" title="Crossplane Github Repository" target="_blank" rel="noopener">
+                <div class="pe-2">
+                  {{ partialCached "icons/github.svg" .}}
+                </div>
+                <div class="">
+                  Crossplane Github
+                </div>
+              </a>
+            </li>
+
+            <li class="col-xs p-2">
+              <a class="navbar-link d-flex" href="https://slack.crossplane.io" title="Join the Crossplane Slack" target="_blank" rel="noopener">
+                <div class="pe-2">
+                  {{ partialCached "icons/slack.svg" . }}
+                </div>
+                <div>
+                  Join the Crossplane Slack
+                </div>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div> -->
+
+</header>
\ No newline at end of file
diff --git a/themes/geekboot/layouts/partials/icons/github.svg b/themes/geekboot/layouts/partials/icons/github.svg
index bb4e45ce..525e5b2b 100644
--- a/themes/geekboot/layouts/partials/icons/github.svg
+++ b/themes/geekboot/layouts/partials/icons/github.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="icon-github" viewBox="0 0 16 16">
   <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
 </svg>
\ No newline at end of file
diff --git a/themes/geekboot/layouts/partials/icons/slack.svg b/themes/geekboot/layouts/partials/icons/slack.svg
index f4aa6e6d..481a2e81 100644
--- a/themes/geekboot/layouts/partials/icons/slack.svg
+++ b/themes/geekboot/layouts/partials/icons/slack.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-slack" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="icon-slack" viewBox="0 0 16 16">
   <path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z"/>
 </svg>
\ No newline at end of file