diff --git a/src/assets/showcase/styles/layout/layout.css b/src/assets/showcase/styles/layout/layout.css
index 71f7d853a1b..377521f0845 100644
--- a/src/assets/showcase/styles/layout/layout.css
+++ b/src/assets/showcase/styles/layout/layout.css
@@ -107,22 +107,26 @@
 }
 
 .layout-light {
+  --primary-color-default:var(--primary-600);
+  --primary-color-inverse-default:var(--surface-0);
   --topbar-sticky-bg:rgba(255,255,255,.7);
   --card-border: 1px solid var(--surface-border);
   --card-bg: var(--surface-card);
-  --glow-image: url(https://www.primefaces.org/cdn/primeng/images/layout/pattern.png), radial-gradient(50% 50% at center top, var(--primary-100) 0%, #ffffff 100%);
+  --glow-image: url(https://www.primefaces.org/cdn/primeng/images/layout/pattern.png);
   --glow-blend: hard-light, multiply;
   --topbar-border: rgba(0,0,0,.05);
   --mobile-menu-bg: var(--surface-overlay);
-  --demo-code-bg: var(--surface-700);
+  --demo-code-bg: var(--surface-800);
   --demo-code-button-color: var(--surface-300);
   --demo-code-button-hover-bg: rgba(255,255,255,.1);
   --demo-code-button-hover-color: var(--surface-100);
-  --doc-highlight-text-bg: var(--primary-100);
-  --doc-highlight-text-color: var(--primary-900);
+  --doc-highlight-text-bg: var(--surface-200);
+  --doc-highlight-text-color: var(--surface-700);
 }
 
 .layout-dark {
+  --primary-color-default:var(--primary-400);
+  --primary-color-inverse-default:var(--gray-900);
   --topbar-sticky-bg:rgba(0,0,0,.3);
   --card-border: 0 none;
   --card-bg: var(--surface-card);
@@ -134,8 +138,8 @@
   --demo-code-button-color: var(--surface-500);
   --demo-code-button-hover-bg: rgba(255,255,255,.1);
   --demo-code-button-hover-color: var(--surface-700);
-  --doc-highlight-text-bg: var(--highlight-bg);
-  --doc-highlight-text-color: var(--highlight-text-color);
+  --doc-highlight-text-bg: var(--surface-50);
+  --doc-highlight-text-color: var(--surface-500);
 }
 
 html {
@@ -350,6 +354,7 @@ button {
   color: var(--surface-900);
   font-weight: 600;
   transition: all 0.2s;
+  position: relative;
   border-radius: var(--border-radius);
 }
 .layout-sidebar .layout-menu > li > button .menu-icon,
@@ -363,6 +368,8 @@ button {
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
+  position: relative;
+  background-color: transparent;
 }
 .layout-sidebar .layout-menu > li > button .menu-icon i,
 .layout-sidebar .layout-menu > li > a .menu-icon i {
@@ -374,9 +381,13 @@ button {
   color: var(--surface-700);
   margin-left: auto;
 }
+.layout-sidebar .layout-menu > li > button:hover .menu-icon,
+.layout-sidebar .layout-menu > li > a:hover .menu-icon {
+  background-color: var(--surface-card);
+}
 .layout-sidebar .layout-menu > li > button:hover .menu-icon i,
 .layout-sidebar .layout-menu > li > a:hover .menu-icon i {
-  color: var(--primary-color);
+  color: var(--primary-color-default);
 }
 .layout-sidebar .layout-menu > li > button:hover .menu-toggle-icon,
 .layout-sidebar .layout-menu > li > a:hover .menu-toggle-icon {
@@ -384,11 +395,11 @@ button {
 }
 .layout-sidebar .layout-menu > li > button.router-link-active,
 .layout-sidebar .layout-menu > li > a.router-link-active {
-  color: var(--primary-color);
+  color: var(--primary-color-default);
 }
 .layout-sidebar .layout-menu > li > button.router-link-active > .menu-icon i,
 .layout-sidebar .layout-menu > li > a.router-link-active > .menu-icon i {
-  color: var(--primary-color);
+  color: var(--primary-color-default);
 }
 .layout-sidebar .layout-menu > li > button:focus-visible,
 .layout-sidebar .layout-menu > li > a:focus-visible {
@@ -407,9 +418,11 @@ button {
   transition: all 0.2s;
   font-weight: 450;
   display: flex;
+  align-items: center;
   padding: 0.5rem 0.5rem 0.5rem 1rem;
   color: var(--surface-700);
   transition: all 0.2s;
+  position: relative;
 }
 .layout-sidebar .layout-menu > li > div ol li a:focus-visible {
   outline: 0 none;
@@ -420,8 +433,8 @@ button {
   border-left-color: var(--surface-500);
 }
 .layout-sidebar .layout-menu > li > div ol li a.router-link-active {
-  color: var(--primary-color);
-  border-left-color: var(--primary-color);
+  color: var(--primary-color-default);
+  border-left-color: var(--primary-color-default);
 }
 .layout-sidebar .layout-menu > li > div ol li ol {
   margin: 0;
@@ -433,6 +446,15 @@ button {
 .layout-sidebar .layout-menu > li > div ol li:has(.menu-child-category):first-child {
   margin-top: 0rem;
 }
+.layout-sidebar .layout-menu .p-tag {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.layout-sidebar .layout-menu .p-tag .p-tag-value {
+  line-height: 1;
+}
 .layout-sidebar .layout-menu .menu-child-category {
   display: flex;
   padding: 0.5rem 0.5rem 0.5rem 0;
@@ -576,12 +598,12 @@ button {
   padding: 0.5rem 1rem;
 }
 .layout-config .p-selectbutton .p-button:first-child {
-  border-top-left-radius: 30px;
-  border-bottom-left-radius: 30px;
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
 }
 .layout-config .p-selectbutton .p-button:last-child {
-  border-top-right-radius: 30px;
-  border-bottom-right-radius: 30px;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
 }
 .layout-config button:focus-visible {
   outline: 0 none;
@@ -1225,8 +1247,9 @@ pre[class*=language-] code {
     max-width: 1728px;
     margin: 0 auto;
   }
+
   .layout-topbar-inner,
-  .layout-footer {
+.layout-footer {
     max-width: 1728px;
     margin: 0 auto;
   }
@@ -1256,9 +1279,10 @@ pre[class*=language-] code {
     height: 1rem;
   }
   .layout-topbar-inner .DocSearch-Button .DocSearch-Button-Placeholder,
-  .layout-topbar-inner .DocSearch-Button .DocSearch-Button-Keys {
+.layout-topbar-inner .DocSearch-Button .DocSearch-Button-Keys {
     display: none;
   }
+
   .layout-sidebar {
     top: 0;
     left: 0;
@@ -1278,9 +1302,11 @@ pre[class*=language-] code {
     opacity: 1;
     transform: translateX(0);
   }
+
   .layout-news-active .layout-sidebar {
     top: 0;
   }
+
   .layout-mask {
     background-color: rgba(0, 0, 0, 0.1);
   }
@@ -1294,9 +1320,11 @@ pre[class*=language-] code {
     background-color: rgba(0, 0, 0, 0.4);
     transition: background-color 0.5s;
   }
+
   .doc-section-nav {
     display: none;
   }
+
   .video-container {
     position: relative;
     width: 100%;
@@ -1310,14 +1338,17 @@ pre[class*=language-] code {
     width: 100%;
     height: 100%;
   }
+
   .layout-content {
     padding-left: 2rem;
     padding-right: 2rem;
   }
+
   .layout-footer {
     padding-left: 2rem;
     padding-right: 2rem;
   }
+
   .blocked-scroll {
     overflow: hidden;
     padding-right: var(--scrollbar-width);
@@ -1339,14 +1370,17 @@ pre[class*=language-] code {
   .layout-topbar-inner .layout-topbar-icon {
     display: inline-flex;
   }
+
   .layout-content {
     padding-left: 1rem;
     padding-right: 1rem;
   }
+
   .layout-footer {
     padding-left: 1rem;
     padding-right: 1rem;
   }
+
   .doc-tabmenu li {
     flex: 1 1 0;
   }
@@ -1354,6 +1388,7 @@ pre[class*=language-] code {
     width: 100%;
     min-width: auto;
   }
+
   .layout-news {
     padding-left: 1rem;
     padding-right: 1rem;
diff --git a/src/assets/showcase/styles/layout/variables/main/_light.scss b/src/assets/showcase/styles/layout/variables/main/_light.scss
index 73d1768bb07..d2e7ed39478 100644
--- a/src/assets/showcase/styles/layout/variables/main/_light.scss
+++ b/src/assets/showcase/styles/layout/variables/main/_light.scss
@@ -4,7 +4,7 @@
     --topbar-sticky-bg:rgba(255,255,255,.7);
     --card-border: 1px solid var(--surface-border);
     --card-bg: var(--surface-card);
-    --glow-image: url(https://www.primefaces.org/cdn/primeng/images/layout/pattern.png), radial-gradient(50% 50% at center top, var(--primary-100) 0%, #ffffff 100%);
+    --glow-image: url(https://www.primefaces.org/cdn/primeng/images/layout/pattern.png);
     --glow-blend: hard-light, multiply;
     --topbar-border: rgba(0,0,0,.05);
     --mobile-menu-bg: var(--surface-overlay);