diff --git a/app.vue b/app.vue
index 592227e32..4f05007a7 100644
--- a/app.vue
+++ b/app.vue
@@ -8,15 +8,6 @@
 import EventBus from '@/layouts/AppEventBus';
 
 export default {
-    /*watch: {
-        $route: {
-            handler(to) {
-                if (to.name === 'index') {
-                    this.themeChangeListener({ theme: this.$appState.darkTheme ? 'aura-dark-green' : 'aura-light-green', dark: this.$appState.darkTheme });
-                }
-            }
-        }
-    },*/
     mounted() {
         EventBus.on('theme-change', this.themeChangeListener);
     },
@@ -34,16 +25,8 @@ export default {
             document.startViewTransition(() => this.applyTheme(event));
         },
         applyTheme(event) {
-            /*this.$primevue.changeTheme(this.$appState.theme, event.theme, 'theme-link', () => {
-                this.$appState.theme = event.theme;
-                this.$appState.darkTheme = event.dark;
-
-                EventBus.emit('theme-change-complete', { theme: event.theme, dark: event.dark });
-            });*/
-            // @todo
-            this.$appState.theme = event.theme;
             this.$appState.darkTheme = event.dark;
-            
+
             if (event.dark) document.documentElement.classList.add('p-dark');
             else document.documentElement.classList.remove('p-dark');
         }
diff --git a/assets/styles/layout/_animation.scss b/assets/styles/layout/_animation.scss
new file mode 100644
index 000000000..3ca6c38c5
--- /dev/null
+++ b/assets/styles/layout/_animation.scss
@@ -0,0 +1,72 @@
+@keyframes px-fadein {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes px-fadeout {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes px-scalein {
+    0% {
+        opacity: 0;
+        transform: scaleY(0.8);
+        transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
+    }
+    100% {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+}
+
+@keyframes px-slidedown {
+    0% {
+        max-height: 0;
+    }
+    100% {
+        max-height: auto;
+    }
+}
+
+@keyframes px-slideup {
+    0% {
+        max-height: 1000px;
+    }
+    100% {
+        max-height: 0;
+    }
+}
+
+.px-hidden {
+    display: none;
+}
+
+.px-scalein {
+    animation: scalein 150ms linear;
+}
+
+.px-fadein {
+    animation: fadein 150ms linear;
+}
+
+.px-fadeout {
+    animation: fadeout 150ms linear;
+}
+
+.px-slidedown {
+    animation: slidedown 0.45s ease-in-out;
+}
+
+.px-slideup {
+    animation: slideup 0.45s cubic-bezier(0, 1, 0, 1);
+}
+  
\ No newline at end of file
diff --git a/assets/styles/layout/_content.scss b/assets/styles/layout/_content.scss
index 563ff8db0..ebdf759c9 100644
--- a/assets/styles/layout/_content.scss
+++ b/assets/styles/layout/_content.scss
@@ -10,7 +10,7 @@
 }
 
 .card {
-    background: var(--card-bg);
+    background: var(--p-surface-card);
     border: var(--card-border);
     padding: 2rem;
     border-radius: 10px;
diff --git a/assets/styles/layout/_core.scss b/assets/styles/layout/_core.scss
index e91e63ee0..4bf5e87d6 100644
--- a/assets/styles/layout/_core.scss
+++ b/assets/styles/layout/_core.scss
@@ -9,13 +9,11 @@ body {
     overflow-y: auto;
     background-color: var(--p-surface-ground);
     font-weight: normal;
-    color: var(--text-color);
+    color: var(--p-text-color);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-}
-
-.layout-wrapper {
-    background-color: var(--p-surface-ground);
+    font-family: var(--p-font-family);
+    font-feature-settings: var(--p-font-feature-settings);
 }
 
 a {
@@ -23,8 +21,8 @@ a {
 }
 
 ::selection {
-    background-color: var(--highlight-bg);
-    color: var(--highlight-text-color);
+    background-color: var(--p-highlight-bg);
+    color: var(--p-highlight-text-color);
 } 
 
 h1, h2, h3, h4, h5, h6 {
@@ -32,7 +30,7 @@ h1, h2, h3, h4, h5, h6 {
     font-family: inherit;
     font-weight: 600;
     line-height: 1.2;
-    color: var(--surface-900);
+    color: var(--p-dark-surface-0, var(--p-surface-900));
 
     &:first-child {
         margin-top: 0;
@@ -68,16 +66,6 @@ p {
     margin: 0 0 1rem 0;
 }
 
-input[type="number"] {
-    -moz-appearance: textfield;
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-    }
-}
-
 .p-toast.p-toast-top-right,
 .p-toast.p-toast-top-left {
     top: 7rem;
@@ -85,7 +73,7 @@ input[type="number"] {
 
 .px-link {
     font-size: 1rem;
-    border-radius: var(--border-radius);
+    border-radius: var(--p-border-radius);
     text-align: left;
 	background-color: transparent;
 	margin: 0;
@@ -102,6 +90,6 @@ input[type="number"] {
 }
 
 button {
-    font-family: var(--font-family);
-    font-feature-settings: var(--font-feature-settings);
+    font-family: var(--p-font-family);
+    font-feature-settings: var(--p-font-feature-settings);
 }
\ No newline at end of file
diff --git a/assets/styles/layout/_docsearch.scss b/assets/styles/layout/_docsearch.scss
index 9ca5433fc..489b414ef 100644
--- a/assets/styles/layout/_docsearch.scss
+++ b/assets/styles/layout/_docsearch.scss
@@ -1,19 +1,19 @@
 .DocSearch-Button {
-    border-radius: var(--border-radius);
-    border: 1px solid var(--surface-border);
+    border-radius: var(--p-border-radius);
+    border: 1px solid var(--p-surface-border);
     height: 2rem;
-    background-color: var(--surface-card);
+    background-color: var(--p-surface-card);
     margin: 0;
     transition: all .3s;
     padding: 0 .5rem;
     @include focus-visible();
 
     &:hover {
-        border-color: var(--primary-color);
+        border-color: var(--p-primary-color);
     }
 
     &:hover {
-        border-color: var(--primary-color);
+        border-color: var(--p-primary-color);
         box-shadow: none;
     }
 
@@ -43,7 +43,7 @@
             border-radius: 0;
             height: auto;
             width: auto;
-            font-family: var(--font-family);
+            font-family: var(--p-font-family);
 
             &:first-child {
                 font-size: 0.75rem;
@@ -59,7 +59,7 @@
                 &::before {
                     content: "\e90d";
                     display: flex;
-                    color: var(--text-color);
+                    color: var(--p-text-color);
                     font-family: "primeicons";
                     font-size: .4rem;
                     opacity: .7;
@@ -79,25 +79,25 @@
 }
 
 .DocSearch-Modal {
-    border: 1px solid var(--surface-border);
+    border: 1px solid var(--p-surface-border);
     box-shadow: none;
 }
 
 .DocSearch-Footer {
     box-shadow: none;
-    border-top: 1px solid var(--surface-border);
-    background-color: var(--surface-overlay);
+    border-top: 1px solid var(--p-surface-border);
+    background-color: var(--p-surface-overlay);
 }
 
 .DocSearch-Form {
-    background: var(--surface-card);
+    background: var(--p-surface-card);
     box-shadow: none;
-    border: 1px solid var(--surface-border);
-    border-radius: var(--border-radius);
+    border: 1px solid var(--p-surface-border);
+    border-radius: var(--p-border-radius);
     transition: border-color .3s;
 
     &:hover {
-        border-color: var(--primary-color);
+        border-color: var(--p-primary-color);
     }
 
     .DocSearch-MagnifierLabel, .DocSearch-Reset {
@@ -106,21 +106,21 @@
 }
 
 .DocSearch-Hit {
-    border-bottom: 1px solid var(--surface-border);
+    border-bottom: 1px solid var(--p-surface-border);
     padding-bottom: 0;
     margin-bottom: .25rem;
 }
 
 .DocSearch-Hit-source {
-    color: var(--primary-color);
+    color: var(--p-primary-color);
 }
 
 .DocSearch-Logo .cls-1, .DocSearch-Logo .cls-2 {
-    fill: var(--primary-color);
+    fill: var(--p-primary-color);
 }
 
 .DocSearch-Prefill {
-    color: var(--primary-color);
+    color: var(--p-primary-color);
 }
 
 .DocSearch-Button-Placeholder {
@@ -130,20 +130,20 @@
 }
 
 :root {
-    --docsearch-searchbox-focus-background: var(--surface-card);
-    --docsearch-text-color: var(--text-color);
-    --docsearch-muted-color: var(--text-color);
-    --docsearch-searchbox-background: var(--surface-card);
-    --docsearch-text-color: var(--text-color);
-    --docsearch-modal-background: var(--surface-overlay);
-    --docsearch-key-gradient: var(--surface-ground);
+    --docsearch-searchbox-focus-background: var(--p-surface-card);
+    --docsearch-text-color: var(--p-text-color);
+    --docsearch-muted-color: var(--p-text-color);
+    --docsearch-searchbox-background: var(--p-surface-card);
+    --docsearch-text-color: var(--p-text-color);
+    --docsearch-modal-background: var(--p-surface-overlay);
+    --docsearch-key-gradient: var(--p-surface-ground);
     --docsearch-key-shadow: none;
-    --docsearch-container-background: var(--maskbg);
-    --docsearch-hit-background: var(--surface-overlay);
+    --docsearch-container-background: var(--p-mask-bg);
+    --docsearch-hit-background: var(--p-surface-overlay);
     --docsearch-hit-shadow: none;
     --docsearch-spacing: 1rem;
-    --docsearch-hit-color: var(--text-color);
-    --docsearch-highlight-color: var(--primary-color);
-    --docsearch-hit-active-color: var(--primary-color-text);
+    --docsearch-hit-color: var(--p-text-color);
+    --docsearch-highlight-color: var(--p-primary-color);
+    --docsearch-hit-active-color: var(--p-primary-color-inverse);
 }
 
diff --git a/assets/styles/layout/_topbar.scss b/assets/styles/layout/_topbar.scss
index bbd53f870..bdc578281 100644
--- a/assets/styles/layout/_topbar.scss
+++ b/assets/styles/layout/_topbar.scss
@@ -8,7 +8,7 @@
     border-bottom: 1px solid transparent;
 
     &.layout-topbar-sticky {
-        border-bottom: 1px solid var(--surface-border);
+        border-bottom: 1px solid var(--p-surface-border);
         background-color: var(--topbar-sticky-bg);
         backdrop-filter: blur(8px);
     }
@@ -28,7 +28,7 @@
 
     .layout-topbar-logo,
     .layout-topbar-icon {
-        border-radius: var(--border-radius);
+        border-radius: 6px;
         @include focus-visible();
 
         svg {
@@ -55,4 +55,176 @@
     .menu-button {
         display: none;
     }
+
+    .topbar-items {
+        display: flex;
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        gap: 0.5rem;
+        align-items: center;
+
+        li {
+            position: relative;
+        }
+
+        .topbar-item {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            border: 1px solid var(--p-surface-border);
+            width: 2rem;
+            height: 2rem;
+            transition: all .2s;
+            border-radius: 6px;
+            margin: 0;
+            padding: 0;
+            background-color: var(--p-surface-card);
+            cursor: pointer;
+    
+            @include focus-visible();
+    
+            &:hover {
+                border-color: var(--primary-color-default);
+            }
+    
+            i, span {
+                color: var(--p-text-color);
+            }
+        }
+
+        .config-item {
+            background-color: var(--p-primary-color);
+            
+            i {
+                color: var(--p-primary-color-inverse);
+            }
+        }
+
+        .config-panel {
+            position: absolute;
+            top: 2.5rem;
+            right: 0;
+            width: 14rem;
+            padding: .75rem;
+            background-color: var(--p-surface-overlay);
+            border-radius: var(--p-border-radius);
+            border: 1px solid var(--p-surface-border);
+            transform-origin: top;
+            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+            
+            .config-panel-content {
+                display: flex;
+                flex-direction: column;
+                gap: 1rem;
+            }
+
+            .config-panel-label {
+                font-size: .875rem;
+                color: var(--p-text-secondary-color);
+                font-weight: 600;
+                line-height: 1;
+            }
+
+            .config-panel-colors {
+                > div {
+                    padding-top: .5rem;
+                    display: flex;
+                    gap: .5rem;
+                    flex-wrap: wrap;
+    
+                    button {
+                        border: none;
+                        width: 1em;
+                        height: 1rem;
+                        border-radius: 50%;
+                        cursor: pointer;
+    
+                        &.active-color {
+                            outline: 2px solid currentcolor;
+                            outline-offset: 2px;
+                        }
+                    }
+                }
+            }
+
+            .config-panel-settings {
+                > div {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                }
+            }
+        }
+
+        .version-item {
+            width: auto;
+            padding: 0.5rem;
+
+            .version-text {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            .version-icon {
+                margin-left: .25rem;
+                color: var(--p-text-secondary-color);
+            }
+        }
+
+        .versions-panel {
+            padding: .25rem;
+            background-color: var(--p-surface-overlay);
+            position: absolute;
+            right: 0;
+            top: auto;
+            border-radius: var(--p-border-radius);
+            border: 1px solid var(--p-surface-border);
+            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+            transform-origin: top;
+            width: 8rem;
+
+            ul {
+                padding: 0;
+                margin: 0;
+                list-style-type: none;
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+
+                li {
+                    margin: 2px;
+
+                }
+
+                a {
+                    display: inline-flex;
+                    padding: 0.5rem .75rem;
+                    border-radius: var(--p-border-radius);
+                    width: 100%;
+                    overflow: hidden;
+
+                    &:hover {
+                        background-color: var(--p-surface-hover);
+                    }
+
+                    span:first-child {
+                        font-weight: bold;
+                        color: var(--p-dark-surface-0, var(--p-surface-900));
+                    }
+
+                    span:last-child {
+                        margin-left: 0.5rem;
+                        color: var(--p-text-color);
+                        white-space: nowrap;
+                        display: block;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                }
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/assets/styles/layout/layout.scss b/assets/styles/layout/layout.scss
index 1d790164d..063aae136 100644
--- a/assets/styles/layout/layout.scss
+++ b/assets/styles/layout/layout.scss
@@ -14,4 +14,5 @@
 @import './_doc';
 @import './_docsearch';
 @import './_responsive';
+@import './_animation';
 @import './landing/_landing';
diff --git a/assets/styles/layout/variables/main/_dark.scss b/assets/styles/layout/variables/main/_dark.scss
index 799af8b7c..ebc7da921 100644
--- a/assets/styles/layout/variables/main/_dark.scss
+++ b/assets/styles/layout/variables/main/_dark.scss
@@ -1,17 +1,15 @@
-.layout-dark {
-    --primary-color-default:var(--primary-400);
-    --primary-color-inverse-default:var(--gray-900);
-    --topbar-sticky-bg:rgba(0,0,0,.3);
+:root[class="p-dark"] {
+    --primary-color-default:var(--p-dark-primary-400);
+    --primary-color-inverse-default:var(--p-dark-zinc-900);
     --card-border: 1px solid transparent;
-    --card-bg: var(--p-surface-card);
     --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--primary-color) 0%, #000000 100%);
     --glow-blend: hard-light, color-dodge;
-    --topbar-border: var(--surface-border);
+    --topbar-sticky-bg:rgba(0,0,0,.3);
     --mobile-menu-bg: rgba(0,0,0,.3);
-    --demo-code-bg: var(--surface-card);
-    --demo-code-button-color: var(--surface-500);
+    --demo-code-bg: var(--p-dark-surface-900);
+    --demo-code-button-color: var(--p-dark-surface-300);
     --demo-code-button-hover-bg: rgba(255,255,255,.1);
-    --demo-code-button-hover-color: var(--surface-700);
-    --doc-highlight-text-bg: var(--surface-50);
-    --doc-highlight-text-color: var(--surface-500);
+    --demo-code-button-hover-color: var(--p-dark-surface-100);
+    --doc-highlight-text-bg: var(--p-dark-surface-800);
+    --doc-highlight-text-color: var(--p-dark-surface-300);
 }
\ No newline at end of file
diff --git a/assets/styles/layout/variables/main/_light.scss b/assets/styles/layout/variables/main/_light.scss
index 1c8bad052..3dce51cfb 100644
--- a/assets/styles/layout/variables/main/_light.scss
+++ b/assets/styles/layout/variables/main/_light.scss
@@ -1,17 +1,15 @@
-.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(--p-surface-border);
-    --card-bg: var(--p-surface-card);
+:root {
+    --primary-color-default:var(--p-primary-600);
+    --primary-color-inverse-default:var(--p-surface-0);
+    --card-border: 1px solid var(--p-surface-200);
     --glow-image: url(https://www.primefaces.org/cdn/primevue/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-800);
-    --demo-code-button-color: var(--surface-300);
+    --topbar-sticky-bg:rgba(255,255,255,.7);
+    --mobile-menu-bg: var(--p-surface-0);
+    --demo-code-bg: var(--p-surface-800);
+    --demo-code-button-color: var(--p-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(--surface-200);
-    --doc-highlight-text-color: var(--surface-700);
+    --demo-code-button-hover-color: var(--p-surface-100);
+    --doc-highlight-text-bg: var(--p-surface-200);
+    --doc-highlight-text-color: var(--p-surface-700);
 }
\ No newline at end of file
diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js
index e2e2f5ecd..3ba95146c 100644
--- a/components/lib/theme/aura/index.js
+++ b/components/lib/theme/aura/index.js
@@ -73,8 +73,13 @@ export default {
                     900: '{slate.900}',
                     950: '{slate.950}'
                 },
-                textColor: '{surface.700}',
-                textSecondaryColor: '{surface.500}'
+                highlight: {
+                    bg: '{primary.50}',
+                    textColor: '{primary.700}'
+                },
+                hover: {
+                    bg: '{surface.100}'
+                }
             },
             dark: {
                 primary: {
@@ -104,12 +109,18 @@ export default {
                     900: '{zinc.900}',
                     950: '{zinc.950}'
                 },
-                textColor: '{dark.surface.0}',
-                textSecondaryColor: '{dark.surface.400}'
+                highlight: {
+                    bg: 'color-mix(in srgb, {primary.50}, transparency %16)',
+                    textColor: 'rgba(255,255,255,.87)'
+                },
+                hover: {
+                    bg: 'rgba(255, 255, 255, 0.03)'
+                }
             }
         },
         common: {
-            fontFamily: '"Inter var", sans-serif',
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+            fontFeatureSettings: '"cv02", "cv03", "cv04", "cv11"',
             borderRadius: '6px',
             transitionDuration: '.2s',
             focusRing: {
@@ -121,7 +132,26 @@ export default {
             surface: {
                 card: 'var(--p-dark-surface-900, var(--p-surface-0))',
                 border: 'var(--p-dark-surface-700, var(--p-surface-200))',
-                ground: 'var(--p-dark-surface-950, var(--p-surface-50))'
+                ground: 'var(--p-dark-surface-950, var(--p-surface-50))',
+                overlay: 'var(--p-dark-surface-900, var(--p-surface-0))',
+                hover: 'var(--p-dark-hover-bg, var(--p-hover-bg))'
+            },
+            text: {
+                color: 'var(--p-dark-surface-0, var(--p-surface-700))',
+                secondaryColor: 'var(--p-dark-surface-400, var(--p-surface-500))'
+            },
+            primary: {
+                color: 'var(--p-dark-primary-400, var(--p-primary-500))',
+                colorInverse: 'var(--p-dark-surface-900, var(--p-surface-0))',
+                colorText: 'var(--p-primary-color-inverse)'
+            },
+            highlight: {
+                bg: 'var(--p-dark-highlight-bg, var(--p-highlight-bg))',
+                textColor: 'var(--p-dark-highlight-text-color, var(--p-highlight-text-color))'
+            },
+            anchorGutter: '2px',
+            mask: {
+                bg: 'rgba(0,0,0,0.4)'
             }
         }
     },
diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
index 55d50068a..a6f4320b0 100755
--- a/layouts/AppConfigurator.vue
+++ b/layouts/AppConfigurator.vue
@@ -1,418 +1,133 @@
 <template>
-    <Sidebar v-model:visible="visible" @hide="onSidebarHide" :class="containerClass" position="right">
-        <div class="p-2">
-            <section class="pb-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
-                <span class="text-xl font-semibold">Scale</span>
-                <div class="flex align-items-center gap-2 border-1 surface-border py-1 px-2" style="border-radius: 30px">
-                    <Button icon="pi pi-minus" @click="decrementScale" text rounded :disabled="scale === scales[0]" />
-                    <i v-for="s in scales" :key="s" :class="['pi pi-circle-fill text-sm text-200', { 'text-lg text-primary': s === scale }]" />
-
-                    <Button icon="pi pi-plus" @click="incrementScale" text rounded :disabled="scale === scales[scales.length - 1]" />
+    <div class="config-panel px-hidden">
+        <div class="config-panel-content">
+            <div class="config-panel-colors">
+                <span class="config-panel-label">Primary</span>
+                <div>
+                    <button
+                        v-for="primaryColor of primaryColors"
+                        :key="primaryColor.name"
+                        type="button"
+                        @click="updateColors('primary', primaryColor.name)"
+                        :class="{ 'active-color': selectedPrimaryColor === primaryColor.name }"
+                        :style="{ backgroundColor: `${primaryColor.palette[5]}` }"
+                    ></button>
                 </div>
-            </section>
-
-            <section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
-                <span :class="['text-xl font-semibold']">Dark Mode</span>
-                <InputSwitch :modelValue="darkMode" @update:modelValue="onDarkModeChange" />
-            </section>
-
-            <section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
-                <span class="text-xl font-semibold">Ripple Effect</span>
-                <InputSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" />
-            </section>
-
-            <section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
-                <span class="text-xl font-semibold">Input Variant</span>
-                <SelectButton :modelValue="inputStyle" @update:modelValue="onInputStyleChange" :options="inputStyles" optionLabel="label" optionValue="value" :allowEmpty="false" />
-            </section>
-
-            <section class="py-4 border-bottom-1 surface-border">
-                <div class="text-xl font-semibold mb-3">Themes</div>
-                <div class="flex align-items-center gap-2 mb-3">
-                    <img src="https://primefaces.org/cdn/primevue/images/themes/aura.png" alt="Aura" style="width: 1.5rem" />
-                    <span class="font-medium">Aura</span>
+            </div>
+            <div class="config-panel-colors">
+                <span class="config-panel-label">Surface</span>
+                <div>
+                    <button
+                        v-for="surface of surfaces"
+                        :key="surface.name"
+                        type="button"
+                        @click="updateColors('surface', surface.name)"
+                        :class="{ 'active-color': selectedSurfaceColor === surface.name }"
+                        :style="{ backgroundColor: `${surface.palette[6]}` }"
+                    ></button>
                 </div>
-                <div class="flex align-items-center justify-content-between gap-3 mb-3">
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('aura', 'green'), 'hover:border-500 surface-border': !isThemeActive('aura', 'green') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('aura', 'green')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4dac9c 0%, rgba(77, 172, 156, 0.5) 100%)"></span>
-                    </button>
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('aura', 'cyan'), 'hover:border-500 surface-border': !isThemeActive('aura', 'cyan') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('aura', 'cyan')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #06b6d4 0%, rgba(6, 182, 212, 0.5) 100%)"></span>
-                    </button>
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('aura', 'blue'), 'hover:border-500 surface-border': !isThemeActive('aura', 'blue') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('aura', 'blue')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4378e6 0%, rgba(67, 120, 230, 0.5) 100%)"></span>
-                    </button>
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('aura', 'indigo'), 'hover:border-500 surface-border': !isThemeActive('aura', 'indigo') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('aura', 'indigo')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #585fe0 0%, rgba(88, 95, 224, 0.5) 100%)"></span>
-                    </button>
+            </div>
+            <div class="config-panel-settings">
+                <div>
+                    <span class="config-panel-label">Ripple</span>
+                    <InputSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" />
                 </div>
-                <div class="flex align-items-center justify-content-between gap-3 mb-3">
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('aura', 'purple'), 'hover:border-500 surface-border': !isThemeActive('aura', 'purple') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('aura', 'purple')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #7758e4 0%, rgba(119, 88, 228, 0.5) 100%)"></span>
-                    </button>
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('aura', 'amber'), 'hover:border-500 surface-border': !isThemeActive('aura', 'amber') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('aura', 'amber')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #f59e0b 0%, rgba(245, 158, 11, 0.5) 100%)"></span>
-                    </button>
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('aura', 'teal'), 'hover:border-500 surface-border': !isThemeActive('aura', 'teal') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('aura', 'teal')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #14b8a6 0%, rgba(20, 184, 166, 0.5) 100%)"></span>
-                    </button>
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('aura', 'pink'), 'hover:border-500 surface-border': !isThemeActive('aura', 'pink') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('aura', 'pink')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #ec4899 0%, rgba(236, 72, 153, 0.5) 100%)"></span>
-                    </button>
-                </div>
-                <div class="flex align-items-center justify-content-between gap-3">
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('aura', 'noir'), 'hover:border-500 surface-border': !isThemeActive('aura', 'noir') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('aura', 'noir')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #0f172a 0%, rgba(0, 0, 0, 0.5) 100%)"></span>
-                    </button>
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('aura', 'lime'), 'hover:border-500 surface-border': !isThemeActive('aura', 'lime') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('aura', 'lime')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #84cc16 0%, rgb(132, 204, 22, 0.5) 100%)"></span>
-                    </button>
-                    <span class="w-3"></span>
-                    <span class="w-3"></span>
-                </div>
-
-                <section class="pt-4 flex align-items-center justify-content-between">
-                    <span class="text-sm">Primary Focus Ring</span>
-                    <InputSwitch :modelValue="primaryFocusRing" @update:modelValue="onFocusRingColorChange" />
-                </section>
-            </section>
-
-            <section class="py-4 border-bottom-1 surface-border">
-                <div class="flex align-items-center gap-2 mb-3">
-                    <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="Lara Light Teal" class="border-circle" style="width: 1.5rem" />
-                    <span class="font-medium">Lara</span>
-                </div>
-                <div class="flex align-items-center justify-content-between gap-3 mb-3">
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('lara', 'green'), 'hover:border-500 surface-border': !isThemeActive('lara', 'green') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('lara', 'green')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4dac9c 0%, rgba(77, 172, 156, 0.5) 100%)"></span>
-                    </button>
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('lara', 'cyan'), 'hover:border-500 surface-border': !isThemeActive('lara', 'cyan') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('lara', 'cyan')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #06b6d4 0%, rgba(6, 182, 212, 0.5) 100%)"></span>
-                    </button>
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('lara', 'blue'), 'hover:border-500 surface-border': !isThemeActive('lara', 'blue') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('lara', 'blue')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4378e6 0%, rgba(67, 120, 230, 0.5) 100%)"></span>
-                    </button>
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('lara', 'indigo'), 'hover:border-500 surface-border': !isThemeActive('lara', 'indigo') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('lara', 'indigo')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #585fe0 0%, rgba(88, 95, 224, 0.5) 100%)"></span>
-                    </button>
-                </div>
-                <div class="flex align-items-center justify-content-between gap-3">
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('lara', 'purple'), 'hover:border-500 surface-border': !isThemeActive('lara', 'purple') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('lara', 'purple')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #7758e4 0%, rgba(119, 88, 228, 0.5) 100%)"></span>
-                    </button>
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('lara', 'amber'), 'hover:border-500 surface-border': !isThemeActive('lara', 'amber') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('lara', 'amber')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #f59e0b 0%, rgba(245, 158, 11, 0.5) 100%)"></span>
-                    </button>
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('lara', 'teal'), 'hover:border-500 surface-border': !isThemeActive('lara', 'teal') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('lara', 'teal')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #14b8a6 0%, rgba(20, 184, 166, 0.5) 100%)"></span>
-                    </button>
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('lara', 'pink'), 'hover:border-500 surface-border': !isThemeActive('lara', 'pink') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('lara', 'pink')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #ec4899 0%, rgba(236, 72, 153, 0.5) 100%)"></span>
-                    </button>
-                </div>
-            </section>
-            <section class="py-4 border-bottom-1 surface-border">
-                <div class="flex align-items-center gap-2 mb-3">
-                    <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Design" class="border-circle" style="width: 1.5rem" />
-                    <span class="font-medium">Material Design</span>
-                    <div class="ml-auto flex align-items-center gap-2">
-                        <label for="material-condensed" class="text-sm">Condensed</label>
-                        <InputSwitch inputId="material-condensed" :modelValue="compactMaterial" @update:modelValue="onCompactMaterialChange" class="ml-auto" />
-                    </div>
-                </div>
-                <div class="flex align-items-center justify-content-between gap-3">
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('md', 'indigo'), 'hover:border-500 surface-border': !isThemeActive('md', 'indigo') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('md', 'indigo')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #0565f2 0%, rgba(5, 101, 242, 0.5) 100%)"></span>
-                    </button>
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('md', 'deeppurple'), 'hover:border-500 surface-border': !isThemeActive('md', 'deeppurple') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('md', 'deeppurple')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #702f92 0%, rgba(112, 47, 146, 0.5) 100%)"></span>
-                    </button>
-                    <div class="w-3"></div>
-                    <div class="w-3"></div>
-                </div>
-            </section>
+            </div>
         </div>
-    </Sidebar>
+    </div>
 </template>
 
 <script>
-import EventBus from '@/layouts/AppEventBus';
-
 export default {
-    emits: ['updateConfigActive', 'darkswitch-click'],
-    props: {
-        configActive: {
-            type: Boolean,
-            default: false
-        }
-    },
     data() {
         return {
-            visible: false,
-            scale: 14,
-            scales: [12, 13, 14, 15, 16],
-            inputStyles: [
-                { label: 'Outlined', value: 'outlined' },
-                { label: 'Filled', value: 'filled' }
+            selectedPrimaryColor: 'emerald',
+            selectedSurfaceColor: 'slate',
+            primaryColors: [
+                /*{ name: 'noir', palette: ['', '', '', '', '', '', '', '', '', '', ''] },*/
+                { name: 'emerald', palette: ['#ecfdf5', '#d1fae5', '#a7f3d0', '#6ee7b7', '#34d399', '#10b981', '#059669', '#047857', '#065f46', '#064e3b', '#022c22'] },
+                { name: 'green', palette: ['#f0fdf4', '#dcfce7', '#bbf7d0', '#86efac', '#4ade80', '#22c55e', '#16a34a', '#15803d', '#166534', '#14532d', '#052e16'] },
+                { name: 'lime', palette: ['#f7fee7', '#ecfccb', '#d9f99d', '#bef264', '#a3e635', '#84cc16', '#65a30d', '#4d7c0f', '#3f6212', '#365314', '#1a2e05'] },
+                { name: 'red', palette: ['#fef2f2', '#fee2e2', '#fecaca', '#fca5a5', '#f87171', '#ef4444', '#dc2626', '#b91c1c', '#991b1b', '#7f1d1d', '#450a0a'] },
+                { name: 'orange', palette: ['#fff7ed', '#ffedd5', '#fed7aa', '#fdba74', '#fb923c', '#f97316', '#ea580c', '#c2410c', '#9a3412', '#7c2d12', '#431407'] },
+                { name: 'amber', palette: ['#fffbeb', '#fef3c7', '#fde68a', '#fcd34d', '#fbbf24', '#f59e0b', '#d97706', '#b45309', '#92400e', '#78350f', '#451a03'] },
+                { name: 'yellow', palette: ['#fefce8', '#fef9c3', '#fef08a', '#fde047', '#facc15', '#eab308', '#ca8a04', '#a16207', '#854d0e', '#713f12', '#422006'] },
+                { name: 'teal', palette: ['#f0fdfa', '#ccfbf1', '#99f6e4', '#5eead4', '#2dd4bf', '#14b8a6', '#0d9488', '#0f766e', '#115e59', '#134e4a', '#042f2e'] },
+                { name: 'cyan', palette: ['#ecfeff', '#cffafe', '#a5f3fc', '#67e8f9', '#22d3ee', '#06b6d4', '#0891b2', '#0e7490', '#155e75', '#164e63', '#083344'] },
+                { name: 'sky', palette: ['#f0f9ff', '#e0f2fe', '#bae6fd', '#7dd3fc', '#38bdf8', '#0ea5e9', '#0284c7', '#0369a1', '#075985', '#0c4a6e', '#082f49'] },
+                { name: 'blue', palette: ['#eff6ff', '#dbeafe', '#bfdbfe', '#93c5fd', '#60a5fa', '#3b82f6', '#2563eb', '#1d4ed8', '#1e40af', '#1e3a8a', '#172554'] },
+                { name: 'indigo', palette: ['#eef2ff', '#e0e7ff', '#c7d2fe', '#a5b4fc', '#818cf8', '#6366f1', '#4f46e5', '#4338ca', '#3730a3', '#312e81', '#1e1b4b'] },
+                { name: 'violet', palette: ['#f5f3ff', '#ede9fe', '#ddd6fe', '#c4b5fd', '#a78bfa', '#8b5cf6', '#7c3aed', '#6d28d9', '#5b21b6', '#4c1d95', '#2e1065'] },
+                { name: 'purple', palette: ['#faf5ff', '#f3e8ff', '#e9d5ff', '#d8b4fe', '#c084fc', '#a855f7', '#9333ea', '#7e22ce', '#6b21a8', '#581c87', '#3b0764'] },
+                { name: 'fuchsia', palette: ['#fdf4ff', '#fae8ff', '#f5d0fe', '#f0abfc', '#e879f9', '#d946ef', '#c026d3', '#a21caf', '#86198f', '#701a75', '#4a044e'] },
+                { name: 'pink', palette: ['#fdf2f8', '#fce7f3', '#fbcfe8', '#f9a8d4', '#f472b6', '#ec4899', '#db2777', '#be185d', '#9d174d', '#831843', '#500724'] },
+                { name: 'rose', palette: ['#fff1f2', '#ffe4e6', '#fecdd3', '#fda4af', '#fb7185', '#f43f5e', '#e11d48', '#be123c', '#9f1239', '#881337', '#4c0519'] }
             ],
-            primaryFocusRing: true,
-            compactMaterial: false
+            surfaces: [
+                {
+                    name: 'slate',
+                    palette: ['#f8fafc', '#f1f5f9', '#e2e8f0', '#cbd5e1', '#94a3b8', '#64748b', '#475569', '#334155', '#1e293b', '#0f172a', '#020617']
+                },
+                {
+                    name: 'gray',
+                    palette: ['#f9fafb', '#f3f4f6', '#e5e7eb', '#d1d5db', '#9ca3af', '#6b7280', '#4b5563', '#374151', '#1f2937', '#111827', '#030712']
+                },
+                {
+                    name: 'zinc',
+                    palette: ['#fafafa', '#f4f4f5', '#e4e4e7', '#d4d4d8', '#a1a1aa', '#71717a', '#52525b', '#3f3f46', '#27272a', '#18181b', '#09090b']
+                },
+                {
+                    name: 'neutral',
+                    palette: ['#fafafa', '#f5f5f5', '#e5e5e5', '#d4d4d4', '#a3a3a3', '#737373', '#525252', '#404040', '#262626', '#171717', '#0a0a0a']
+                },
+                {
+                    name: 'stone',
+                    palette: ['#fafaf9', '#f5f5f4', '#e7e5e4', '#d6d3d1', '#a8a29e', '#78716c', '#57534e', '#44403c', '#292524', '#1c1917', '#0c0a09']
+                }
+            ]
         };
     },
-    watch: {
-        configActive(value) {
-            this.visible = value;
-        }
-    },
-    outsideClickListener: null,
-    themeChangeListener: null,
-    beforeUnmount() {
-        EventBus.off('theme-change', this.themeChangeListener);
-    },
-    mounted() {
-        this.themeChangeListener = (event) => {
-            if (event.theme === 'nano') this.scale = 12;
-            else this.scale = 14;
-
-            this.applyScale();
-        };
-
-        EventBus.on('theme-change', this.themeChangeListener);
-    },
     methods: {
-        onSidebarHide() {
-            this.visible = false;
-            this.$emit('updateConfigActive', false);
-        },
-        changeTheme(theme, color) {
-            let newTheme, dark;
+        updateColors(type, colorName) {
+            let selectedColor;
 
-            newTheme = theme + '-' + (this.$appState.darkTheme ? 'dark' : 'light');
-
-            if (color) {
-                newTheme += '-' + color;
+            if (type === 'primary') {
+                selectedColor = this.primaryColors.find((color) => color.name === colorName);
+                this.selectedPrimaryColor = selectedColor.name;
+            } else if (type === 'surface') {
+                selectedColor = this.surfaces.find((color) => color.name === colorName);
+                this.selectedSurfaceColor = selectedColor.name;
             }
 
-            if (newTheme.startsWith('md-') && this.compactMaterial) {
-                newTheme = newTheme.replace('md-', 'mdc-');
+            if (!document.startViewTransition) {
+                this.applyTheme(type, selectedColor.palette);
+
+                return;
             }
 
-            dark = this.$appState.darkTheme;
+            document.startViewTransition(() => this.applyTheme(type, selectedColor.palette));
+        },
+        applyTheme(type, colors) {
+            let shades;
 
-            EventBus.emit('theme-change', { theme: newTheme, dark: dark });
-        },
-        decrementScale() {
-            this.scale--;
-            this.applyScale();
-        },
-        incrementScale() {
-            this.scale++;
-            this.applyScale();
-        },
-        applyScale() {
-            document.documentElement.style.fontSize = this.scale + 'px';
+            if (type === 'primary') {
+                shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+            } else if (type === 'surface') {
+                shades = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+            }
+
+            colors.forEach((color, index) => {
+                document.documentElement.style.setProperty(`--p-${type}-${shades[index]}`, color);
+                document.documentElement.style.setProperty(`--p-dark-${type}-${shades[index]}`, color);
+            });
         },
         onRippleChange(value) {
             this.$appState.ripple = value;
-        },
-        onInputStyleChange(value) {
-            this.$primevue.config.inputStyle = value;
-        },
-        onDarkModeChange() {
-            this.$emit('darkswitch-click');
-        },
-        onCompactMaterialChange(value) {
-            this.compactMaterial = value;
-
-            if (this.$appState.theme.startsWith('md')) {
-                let tokens = this.$appState.theme.split('-');
-
-                this.changeTheme(tokens[0].substring(0, 2), tokens[2]);
-            }
-        },
-        isThemeActive(themeFamily, color) {
-            let themeName;
-            let themePrefix = themeFamily === 'md' && this.compactMaterial ? 'mdc' : themeFamily;
-
-            themeName = themePrefix + (this.$appState.darkTheme ? '-dark' : '-light');
-
-            if (color) {
-                themeName += '-' + color;
-            }
-
-            return this.$appState.theme === themeName;
-        },
-        onFocusRingColorChange(value) {
-            this.primaryFocusRing = value;
-            let root = document.documentElement;
-
-            if (value) {
-                if (this.$appState.darkTheme) root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');
-                else root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');
-            } else {
-                if (this.$appState.darkTheme) root.style.setProperty('--p-focus-ring-color', 'var(--surface-500)');
-                else root.style.setProperty('--p-focus-ring-color', 'var(--surface-900)');
-            }
         }
     },
     computed: {
-        darkMode() {
-            return this.$appState.darkTheme;
-        },
         rippleActive() {
             return this.$appState.ripple;
-        },
-        inputStyle() {
-            return this.$primevue.config.inputStyle || 'outlined';
-        },
-        containerClass() {
-            return [
-                'layout-config w-full sm:w-26rem',
-                {
-                    'layout-dark': this.$appState.darkTheme,
-                    'layout-light': !this.$appState.darkTheme
-                }
-            ];
         }
     }
 };
diff --git a/layouts/AppTopBar.vue b/layouts/AppTopBar.vue
index 26c38d586..6c121fad1 100755
--- a/layouts/AppTopBar.vue
+++ b/layouts/AppTopBar.vue
@@ -8,137 +8,117 @@
                             fill-rule="evenodd"
                             clip-rule="evenodd"
                             d="M128.062 32C128.438 32 128.656 31.8125 128.75 31.4375L134.031 7.6875C134.125 7.25 133.938 7 133.469 7H130.5C130.125 7 129.906 7.1875 129.812 7.5625L126.5 24.3125L123.219 7.5625C123.125 7.1875 122.906 7 122.531 7H119.562C119.094 7 118.906 7.25 119 7.6875L124.25 31.4375C124.344 31.8125 124.562 32 124.938 32H128.062ZM144.562 32C147.5 32 149.062 30.4375 149.062 27.5V7.625C149.062 7.28125 148.781 7 148.438 7H145.562C145.219 7 144.938 7.28125 144.938 7.625V26.625C144.938 27.4688 144.5 27.875 143.688 27.875H142.062C141.25 27.875 140.812 27.4688 140.812 26.625V7.625C140.812 7.28125 140.531 7 140.188 7H137.188C136.844 7 136.562 7.28125 136.562 7.625V27.5C136.562 30.4375 138.125 32 141.062 32H144.562ZM164.656 31.5C164.656 31.8125 164.531 32 164.156 32H152.656C152.375 32 152.188 31.8125 152.188 31.5V7.5C152.188 7.1875 152.375 7 152.656 7H164.156C164.531 7 164.656 7.1875 164.656 7.5V10.625C164.656 10.9375 164.531 11.1562 164.156 11.1562H156.344V17.4062H162.312C162.625 17.4062 162.812 17.5938 162.812 17.9375V21.0312C162.812 21.375 162.625 21.5625 162.312 21.5625H156.344V27.875H164.156C164.531 27.875 164.656 28.0312 164.656 28.375V31.5Z"
-                            fill="var(--primary-color)"
+                            fill="var(--p-primary-color)"
                         />
                         <path
                             fill-rule="evenodd"
                             clip-rule="evenodd"
                             d="M48.0938 32C48.4375 32 48.5938 31.8125 48.5938 31.5V23.625H52.3438C55.2812 23.625 56.8438 22.0312 56.8438 19.125V11.5C56.8438 8.5625 55.2812 7 52.3438 7H44.8438C44.5312 7 44.3438 7.1875 44.3438 7.5V31.5C44.3438 31.8125 44.5312 32 44.8438 32H48.0938ZM51.3438 19.5H48.5938V11.125H51.3438C52.1875 11.125 52.5938 11.5625 52.5938 12.375V18.25C52.5938 19.0312 52.1875 19.5 51.3438 19.5ZM63.9062 31.5C63.9062 31.8125 63.7188 32 63.4062 32H60.1562C59.8438 32 59.6562 31.8125 59.6562 31.5V7.5C59.6562 7.1875 59.8438 7 60.1562 7H68C70.9375 7 72.5 8.5625 72.5 11.5V19.125C72.5 21.2188 71.7188 22.5938 70.2188 23.25L72.375 31.4375C72.4688 31.8125 72.2812 32 71.9375 32H68.6875C68.375 32 68.2188 31.8438 68.1562 31.5625L66.0625 23.625H63.9062V31.5ZM67 19.5H63.9062V11.125H67C67.8125 11.125 68.25 11.5625 68.25 12.375V18.25C68.25 19.0625 67.8125 19.5 67 19.5ZM79.875 31.5C79.875 31.8125 79.6875 32 79.375 32H76.125C75.7812 32 75.625 31.8125 75.625 31.5V7.5C75.625 7.1875 75.7812 7 76.125 7H79.375C79.6875 7 79.875 7.1875 79.875 7.5V31.5ZM86.5 32C86.9062 32 87.125 31.7812 87.125 31.375V17.3125H87.3438L90.4375 31.4375C90.5312 31.8125 90.75 32 91.125 32H92.6562C93.0312 32 93.25 31.8125 93.3438 31.4375L96.4375 17.3125H96.6562V31.375C96.6562 31.7812 96.875 32 97.2812 32H100.188C100.594 32 100.812 31.7812 100.812 31.375V7.625C100.812 7.21875 100.594 7 100.188 7H96.0625C95.6875 7 95.4688 7.1875 95.375 7.5625L91.9062 23.125L88.4375 7.5625C88.3438 7.1875 88.125 7 87.75 7H83.625C83.2188 7 83 7.21875 83 7.625V31.375C83 31.7812 83.2188 32 83.625 32H86.5ZM116.406 31.5C116.406 31.8125 116.281 32 115.906 32H104.406C104.125 32 103.938 31.8125 103.938 31.5V7.5C103.938 7.1875 104.125 7 104.406 7H115.906C116.281 7 116.406 7.1875 116.406 7.5V10.625C116.406 10.9375 116.281 11.1562 115.906 11.1562H108.094V17.4062H114.062C114.375 17.4062 114.562 17.5938 114.562 17.9375V21.0312C114.562 21.375 114.375 21.5625 114.062 21.5625H108.094V27.875H115.906C116.281 27.875 116.406 28.0312 116.406 28.375V31.5Z"
-                            fill="var(--text-color)"
+                            fill="var(--p-text-color)"
                         />
-                        <path d="M25.5739 18.0458L22.8661 17.4443L24.9722 20.4519V29.7756L32.193 23.7603V13.5344L28.8835 14.7374L25.5739 18.0458Z" fill="var(--primary-color)" />
-                        <path d="M8.72522 18.0458L11.433 17.4443L9.32696 20.4519V29.7756L2.10609 23.7603V13.5344L5.41565 14.7374L8.72522 18.0458Z" fill="var(--primary-color)" />
+                        <path d="M25.5739 18.0458L22.8661 17.4443L24.9722 20.4519V29.7756L32.193 23.7603V13.5344L28.8835 14.7374L25.5739 18.0458Z" fill="var(--p-primary-color)" />
+                        <path d="M8.72522 18.0458L11.433 17.4443L9.32696 20.4519V29.7756L2.10609 23.7603V13.5344L5.41565 14.7374L8.72522 18.0458Z" fill="var(--p-primary-color)" />
                         <path
                             fill-rule="evenodd"
                             clip-rule="evenodd"
                             d="M10.2296 21.0534L12.6365 17.4443L14.1409 18.3466H20.1582L21.6626 17.4443L24.0696 21.0534V34.5878L22.2643 37.2947L20.1582 39.4H14.1409L12.0348 37.2947L10.2296 34.5878V21.0534Z"
-                            fill="var(--primary-color)"
+                            fill="var(--p-primary-color)"
                         />
-                        <path d="M24.9722 35.4901L28.8835 31.5802V27.6702L24.9722 30.9786V35.4901Z" fill="var(--primary-color)" />
-                        <path d="M9.32697 35.4901L5.41566 31.5802V27.6702L9.32697 30.9786V35.4901Z" fill="var(--primary-color)" />
+                        <path d="M24.9722 35.4901L28.8835 31.5802V27.6702L24.9722 30.9786V35.4901Z" fill="var(--p-primary-color)" />
+                        <path d="M9.32697 35.4901L5.41566 31.5802V27.6702L9.32697 30.9786V35.4901Z" fill="var(--p-primary-color)" />
                         <path
                             fill-rule="evenodd"
                             clip-rule="evenodd"
                             d="M21.0609 0H20.1583V5.7988L21.8141 1.78842L21.0609 0ZM19.5762 7.20849L18.9548 7.51908V0H17.7513V11.6281L19.5762 7.20849ZM17.7513 14.2483L22.3605 3.08549L23.4678 5.7145L19.8574 17.1435H17.7513V14.2483ZM16.5478 11.6718V0H15.3443V7.51908L14.8434 7.26869L16.5478 11.6718ZM14.1409 5.45385V0H13.2383L12.6085 1.49519L14.1409 5.45385ZM12.0497 2.82181L16.5478 14.4419V17.1435H14.7426L10.8313 5.7145L12.0497 2.82181Z"
-                            fill="var(--text-color)"
+                            fill="var(--p-text-color)"
                         />
                         <path
                             fill-rule="evenodd"
                             clip-rule="evenodd"
                             d="M1.80522 12.3313L14.7426 17.1435H15.0435L11.1322 5.71452L0 4.81223L1.80522 12.3313ZM32.7948 12.3313L19.8574 17.1435H19.5565L23.167 5.71452L34.6 4.81223L32.7948 12.3313Z"
-                            fill="var(--primary-color)"
+                            fill="var(--p-primary-color)"
                         />
-                        <path d="M24.0696 4.81221L30.3878 4.21069L26.1757 0H21.9635L24.0696 4.81221Z" fill="var(--text-color)" />
-                        <path d="M10.2295 4.81221L3.91129 4.21069L8.12346 0H12.3356L10.2295 4.81221Z" fill="var(--text-color)" />
-                        <path d="M4.70001 5.20001L11.2 5.70001L15.1 17.15H14.7L10.5 15.6L4.70001 5.20001Z" fill="var(--text-color)" />
-                        <path d="M29.8 5.20001L23.1 5.70001L19.4 17.15L19.9 17.14L23.8 15.7L29.8 5.20001Z" fill="var(--text-color)" />
-                        <path d="M12.1 18.2L12.6 17.4L14.3 18.2H20.3L21.6 17.4L22.2 18.2L17.15 26.8L12.1 18.2Z" fill="var(--text-color)" />
-                        <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0297 0L17.1214 13.1536L22.5526 0H12.0297Z" fill="var(--primary-color)" />
+                        <path d="M24.0696 4.81221L30.3878 4.21069L26.1757 0H21.9635L24.0696 4.81221Z" fill="var(--p-text-color)" />
+                        <path d="M10.2295 4.81221L3.91129 4.21069L8.12346 0H12.3356L10.2295 4.81221Z" fill="var(--p-text-color)" />
+                        <path d="M4.70001 5.20001L11.2 5.70001L15.1 17.15H14.7L10.5 15.6L4.70001 5.20001Z" fill="var(--p-text-color)" />
+                        <path d="M29.8 5.20001L23.1 5.70001L19.4 17.15L19.9 17.14L23.8 15.7L29.8 5.20001Z" fill="var(--p-text-color)" />
+                        <path d="M12.1 18.2L12.6 17.4L14.3 18.2H20.3L21.6 17.4L22.2 18.2L17.15 26.8L12.1 18.2Z" fill="var(--p-text-color)" />
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0297 0L17.1214 13.1536L22.5526 0H12.0297Z" fill="var(--p-primary-color)" />
                     </svg>
                 </PrimeVueNuxtLink>
                 <PrimeVueNuxtLink to="/" class="layout-topbar-icon" aria-label="PrimeVue logo">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path
                             d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                            fill="var(--primary-color)"
+                            fill="var(--p-primary-color)"
                         />
                         <path
                             d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                            fill="var(--text-color)"
+                            fill="var(--p-text-color)"
                         />
                     </svg>
                 </PrimeVueNuxtLink>
             </div>
 
-            <ul class="flex list-none m-0 p-0 gap-2 align-items-center">
+            <ul class="topbar-items">
                 <li>
                     <div id="docsearch"></div>
                 </li>
                 <li>
-                    <a
-                        href="https://github.com/primefaces/primevue"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
-                    >
-                        <i class="pi pi-github text-700"></i>
+                    <a href="https://github.com/primefaces/primevue" target="_blank" rel="noopener noreferrer" class="topbar-item">
+                        <i class="pi pi-github"></i>
                     </a>
                 </li>
                 <li>
-                    <a
-                        href="https://discord.gg/gzKFYnpmCY"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
-                    >
-                        <i class="pi pi-discord text-700"></i>
+                    <a href="https://discord.gg/gzKFYnpmCY" target="_blank" rel="noopener noreferrer" class="topbar-item">
+                        <i class="pi pi-discord"></i>
                     </a>
                 </li>
                 <li>
-                    <a
-                        href="https://github.com/orgs/primefaces/discussions"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
-                    >
-                        <i class="pi pi-comments text-700"></i>
+                    <a href="https://github.com/orgs/primefaces/discussions" target="_blank" rel="noopener noreferrer" class="topbar-item">
+                        <i class="pi pi-comments"></i>
                     </a>
                 </li>
+                <li>
+                    <button type="button" class="topbar-item" @click="toggleDarkMode">
+                        <i :class="['pi', { 'pi-moon': $appState.darkTheme, 'pi-sun': !$appState.darkTheme }]"></i>
+                    </button>
+                </li>
                 <li>
                     <button
+                        v-styleclass="{ selector: '@next', enterClass: 'px-hidden', enterActiveClass: 'px-scalein', leaveToClass: 'px-hidden', leaveActiveClass: 'px-fadeout', hideOnOutsideClick: true }"
                         type="button"
-                        class="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
-                        @click="toggleDarkMode"
+                        class="topbar-item config-item"
                     >
-                        <i :class="['pi text-700', { 'pi-moon': $appState.darkTheme, 'pi-sun': !$appState.darkTheme }]"></i>
-                    </button>
-                </li>
-                <li v-if="showConfigurator">
-                    <button type="button" class="p-button flex-shrink-0 flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center transition-all transition-duration-300 min-w-0" @click="onConfigButtonClick">
                         <i class="pi pi-palette"></i>
                     </button>
+                    <AppConfigurator />
                 </li>
-                <li class="relative">
+                <li>
                     <button
-                        v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }"
+                        v-styleclass="{ selector: '@next', enterClass: 'px-hidden', enterActiveClass: 'px-scalein', leaveToClass: 'px-hidden', leaveActiveClass: 'px-fadeout', hideOnOutsideClick: true }"
                         type="button"
                         style="max-width: 8rem"
-                        class="px-link flex align-items-center surface-card h-2rem px-2 border-1 border-solid surface-border transition-all transition-duration-300 hover:border-primary"
+                        class="topbar-item version-item"
                     >
-                        <span class="text-900 block white-space-nowrap overflow-hidden"> {{ versions[0].version }}</span>
-                        <span class="ml-2 pi pi-angle-down text-600"></span>
+                        <span class="version-text">{{ versions[0].version }}</span>
+                        <span class="version-icon pi pi-angle-down"></span>
                     </button>
 
-                    <div class="p-3 surface-overlay hidden absolute right-0 top-auto border-round shadow-2 origin-top w-8rem">
-                        <ul class="list-none m-0 p-0">
+                    <div class="versions-panel px-hidden">
+                        <ul>
                             <li v-for="version in versions" :key="version.version" role="none">
-                                <a :href="version.url" class="inline-flex p-2 border-round hover:surface-hover w-full">
-                                    <span class="font-bold text-900">{{ version.name }}</span>
-                                    <span class="ml-2 text-700 white-space-nowrap block overflow-hidden text-overflow-ellipsis">{{ version.version }}</span>
+                                <a :href="version.url">
+                                    <span>{{ version.name }}</span>
+                                    <span>{{ version.version }}</span>
                                 </a>
                             </li>
                         </ul>
                     </div>
                 </li>
                 <li v-if="showMenuButton" class="menu-button">
-                    <button
-                        type="button"
-                        class="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary menu-button"
-                        @click="onMenuButtonClick"
-                        aria-haspopup
-                        aria-label="Menu"
-                    >
-                        <i class="pi pi-bars text-700"></i>
+                    <button type="button" class="topbar-item menu-button" @click="onMenuButtonClick" aria-haspopup aria-label="Menu">
+                        <i class="pi pi-bars"></i>
                     </button>
                 </li>
             </ul>
@@ -147,6 +127,7 @@
 </template>
 
 <script>
+import AppConfigurator from '@/layouts/AppConfigurator';
 import pkg from '@/package.json';
 import docsearch from '@docsearch/js';
 
@@ -154,10 +135,6 @@ export default {
     emits: ['menubutton-click', 'configbutton-click', 'darkswitch-click'],
     outsideClickListener: null,
     props: {
-        showConfigurator: {
-            type: Boolean,
-            default: true
-        },
         showMenuButton: {
             type: Boolean,
             default: true
@@ -213,9 +190,6 @@ export default {
         }
     },
     methods: {
-        onConfigButtonClick(event) {
-            this.$emit('configbutton-click', event);
-        },
         onMenuButtonClick(event) {
             this.$emit('menubutton-click', event);
         },
@@ -263,6 +237,9 @@ export default {
         containerRef(el) {
             this.container = el;
         }
+    },
+    components: {
+        AppConfigurator
     }
 };
 </script>
diff --git a/layouts/default.vue b/layouts/default.vue
index 2939a2cdc..026e5c8a0 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,8 +1,7 @@
 <template>
     <div class="layout-wrapper" :class="containerClass" :data-p-theme="$appState.theme">
         <AppNews />
-        <AppTopBar @menubutton-click="onMenuButtonClick" @configbutton-click="onConfigButtonClick" @darkswitch-click="onDarkModeToggle" />
-        <AppConfigurator :configActive="appConfigActive" @updateConfigActive="onUpdateConfigActive" @darkswitch-click="onDarkModeToggle" />
+        <AppTopBar @menubutton-click="onMenuButtonClick" @darkswitch-click="onDarkModeToggle" />
         <div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>
         <div class="layout-content">
             <app-menu :active="sidebarActive" />
@@ -21,7 +20,6 @@
 <script>
 import DomHandler from '@/components/lib/utils/DomHandler';
 import EventBus from '@/layouts/AppEventBus';
-import AppConfigurator from './AppConfigurator';
 import AppFooter from './AppFooter.vue';
 import AppMenu from './AppMenu.vue';
 import AppNews from './AppNews.vue';
@@ -30,45 +28,23 @@ import AppTopBar from './AppTopBar.vue';
 export default {
     data() {
         return {
-            sidebarActive: false,
-            appConfigActive: false,
-            defaultRipple: false
+            sidebarActive: false
         };
     },
     watch: {
         $route: {
             immediate: true,
-            handler(to, from) {
+            handler() {
                 if (!process.client || typeof window === 'undefined') {
                     return;
                 }
 
-                if (!this.defaultRipple) {
-                    if (to.name === 'ripple') {
-                        this.$appState.ripple = true;
-                    } else if (from?.name === 'ripple') {
-                        this.$appState.ripple = this.defaultRipple;
-                    }
-                }
-
                 this.sidebarActive = false;
                 DomHandler.unblockBodyScroll('blocked-scroll');
                 this.$toast.removeAllGroups();
             }
         }
     },
-    beforeCreate() {
-        this.defaultRipple = this.$appState.ripple;
-    },
-    mounted() {
-        if (this.isOutdatedIE()) {
-            this.$toast.add({
-                severity: 'warn',
-                summary: 'Limited Functionality',
-                detail: 'Although PrimeVue supports IE11, ThemeSwitcher in this application cannot be not fully supported by your browser. Please use a modern browser for the best experience of the showcase.'
-            });
-        }
-    },
     methods: {
         onMenuButtonClick() {
             if (this.sidebarActive) {
@@ -92,12 +68,6 @@ export default {
 
             return false;
         },
-        onConfigButtonClick() {
-            this.appConfigActive = true;
-        },
-        onUpdateConfigActive() {
-            this.appConfigActive = false;
-        },
         onDarkModeToggle() {
             /*let newTheme = null;
             let currentTheme = this.$appState.theme;
@@ -129,7 +99,6 @@ export default {
         AppTopBar,
         AppMenu,
         AppFooter,
-        AppConfigurator,
         AppNews
     }
 };