diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue
index 260674bc6..1e81612d4 100755
--- a/src/AppTopBar.vue
+++ b/src/AppTopBar.vue
@@ -4,13 +4,12 @@
             <i class="pi pi-bars"></i>
         </a>
         <router-link to="/" class="logo">
-            <img alt="logo" src="./assets/images/primevue-logo.png">
+            <img :src="'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo"/>
         </router-link>
         <div class="app-theme" v-tooltip.bottom="$appState.theme">
             <img :src="'demo/images/themes/' + logoMap[$appState.theme]" />
         </div>
         <ul ref="topbarMenu" class="topbar-menu">
-            <li><router-link to="/setup">Get Started</router-link></li>
             <li class="topbar-submenu">
                 <a tabindex="0" @click="toggleMenu($event, 0)">
                     <span v-badge.danger>Themes</span>
@@ -122,6 +121,15 @@
                     </ul>
                 </transition>
             </li>
+            <li class="topbar-submenu">
+                <a tabindex="0" @click="toggleMenu($event, 3)">v3.12.0</a>
+                <transition name="p-connected-overlay" @enter="onMenuEnter">
+                    <ul v-show="activeMenuIndex === 3" style="width: 100%">
+                        <li><router-link to="/"><span class="m-0">v3.12.0</span></router-link></li>
+                        <li><a href="https://www.primefaces.org/primevue/showcase-v2/#/"><span class="m-0">v2.9.0</span></a></li>
+                    </ul>
+                </transition>
+            </li>
         </ul>
     </div>
 </template>
diff --git a/src/assets/styles/app/_responsive.scss b/src/assets/styles/app/_responsive.scss
index 24762c534..53de5aece 100644
--- a/src/assets/styles/app/_responsive.scss
+++ b/src/assets/styles/app/_responsive.scss
@@ -24,11 +24,12 @@
     }
 
     .layout-topbar {
-        margin-left: 0;
         height: 110px;
         flex-wrap: wrap;
         justify-content: space-between;
         padding: 0;
+        left: 0;
+        width: 100%;
 
         .menu-button {
             display: block;
@@ -51,20 +52,18 @@
             width: 100%;
             height: 40px;
             margin: 0;
-            border-top: 1px solid var(--surface-border);
 
             > li {
-                height: 40px;
-                line-height: 40px;
                 width: 25%;
+                margin-right: 0;
 
                 > a {
-                    padding-bottom: 0;
-                    height: 40px;
-                    line-height: 38px;
+                    display: flex;
+                    height: 100%;
                     width: 100%;
-                    font-size: 14px;
-                    min-width: auto;
+                    justify-content: center;
+                    align-items: center;
+                    border-radius: 0;
                 }
 
                 &.topbar-submenu > ul {
@@ -75,8 +74,10 @@
     }
 
     .layout-sidebar {
+        top: 0;
+        z-index: 1102;
+        height: 100%;
         transform: translateX(-100%);
-        z-index: 999;
 
         &.active {
             transform: translateX(0);
@@ -85,6 +86,7 @@
 
     .layout-content {
         margin-left: 0;
+        padding-top: 110px;
 
         .content-section {
             &.introduction {
diff --git a/src/assets/styles/app/_topbar.scss b/src/assets/styles/app/_topbar.scss
index 5b9cf1941..7e193abf7 100644
--- a/src/assets/styles/app/_topbar.scss
+++ b/src/assets/styles/app/_topbar.scss
@@ -1,5 +1,5 @@
 .layout-topbar {
-    padding: 0 4rem;
+    padding: 0;
     height: 70px;
     position: fixed;
     top: 0;
@@ -8,6 +8,7 @@
     z-index: 1100;
     display: flex;
     align-items: center;
+    padding: 0 4rem;
     
     &.layout-topbar-sticky {
         backdrop-filter: blur(12px);
@@ -37,6 +38,14 @@
         }
     }
 
+    .logo {
+        &:focus {
+            outline: 0 none;
+            transition: box-shadow .2s;
+            box-shadow: var(--focus-ring);
+        }
+    }
+
     .app-theme {
         background-color: var(--primary-color);
         color: var(--primary-color-text);
@@ -55,36 +64,33 @@
         list-style-type: none;
         margin: 0;
         padding: 0;
-        height: 100%;
         margin-left: auto;
         display: flex;
 
         > li {
-            height: 70px;
-            line-height: 70px;
+            margin-right: .5rem;
 
             > a {
+                font-weight: 500;
                 text-decoration: none;
                 color: var(--text-color);
-                min-width: 120px;
-                font-size: 16px;
+                padding: .5rem 1.5rem;
                 display: block;
                 text-align: center;
                 user-select: none;
-                line-height: 68px;
-                border-bottom: 2px solid transparent;
-                transition: border-bottom-color .2s;
+                border-radius: 10px;
                 cursor: pointer;
-
-                &:hover, &:focus {
-                    border-bottom-color: var(--primary-color);
-                }
+                transition: background-color .3s;
 
                 &:focus {
                     z-index: 1;
                     outline: 0 none;
                     transition: box-shadow .2s;
-                    box-shadow: inset 0 0 0 0.2em $focusBorderColor;
+                    box-shadow: var(--focus-ring);
+                }
+
+                &:hover {
+                    background-color: var(--surface-hover);
                 }
             }
 
@@ -94,9 +100,8 @@
                 > ul {
                     position: absolute;
                     transform-origin: top;
-                    top: 70px;
+                    top: 40px;
                     right: 0;
-                    z-index: 2;
                     width: 275px;
                     max-height: 400px;
                     background-color: var(--surface-overlay);
@@ -105,7 +110,7 @@
                     list-style-type: none;
                     padding: 1rem;
                     margin: 0;
-                    border-radius: 3px;
+                    border-radius: 10px;
 
                     > li {
                         line-height: 1;
@@ -132,8 +137,9 @@
                         display: flex;
                         align-items: center;
                         user-select: none;
-                        border-radius: 3px;
+                        border-radius: 10px;
                         cursor: pointer;
+                        width: 100%;
 
                         &:hover {
                             background-color: var(--surface-hover);