diff --git a/apps/showcase/assets/styles/layout/_core.scss b/apps/showcase/assets/styles/layout/_core.scss
index 5bddda336..31aeb6fec 100644
--- a/apps/showcase/assets/styles/layout/_core.scss
+++ b/apps/showcase/assets/styles/layout/_core.scss
@@ -5,10 +5,6 @@ html {
     line-height: normal;
 }
 
-.material {
-    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
 body {
     margin: 0px;
     min-height: 100%;
diff --git a/apps/showcase/assets/styles/layout/_designer.scss b/apps/showcase/assets/styles/layout/_designer.scss
index 85280939f..e3627b5d1 100644
--- a/apps/showcase/assets/styles/layout/_designer.scss
+++ b/apps/showcase/assets/styles/layout/_designer.scss
@@ -13,6 +13,23 @@
         cursor: pointer;
     }
 
+    input:focus-visible {
+        outline: 1px solid var(--designer-focus-outline-color);
+        outline-offset: 0px;
+    }
+
+    button:focus-visible {
+        outline: 1px solid var(--designer-focus-outline-color);
+        outline-offset: 2px;
+    }
+
+    .p-icon,
+    .pi {
+        font-size: 14px !important;
+        width: 14px !important;
+        height: 14px !important;
+    }
+
     [type='color']::-webkit-color-swatch {
         border-radius: 4px;
         width: 24px;
@@ -25,15 +42,15 @@
     }
 
     &.p-drawer {
-        background: light-dark(var(--p-surface-0), var(--p-surface-900));
-        border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
-        color: light-dark(#09090b, #ffffff);
+        background: var(--overlay-background);
+        border-color: var(--border-color);
+        color: var(--high-contrast-text-color);
         box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
     }
 
     .p-fieldset {
         background: transparent;
-        border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
+        border-color: var(--border-color);
         border-radius: 4px;
         color: inherit;
         padding: 0 1.125rem 1.125rem 1.125rem;
@@ -56,7 +73,11 @@
             background: transparent;
             border: 0 none;
             border-radius: 4px;
-            outline-color: transparent;
+
+            &:focus-visible {
+                outline: 1px solid var(--designer-focus-outline-color);
+                outline-offset: -1px;
+            }
         }
 
         .p-fieldset-toggle-icon {
@@ -84,37 +105,43 @@
         .p-tablist-tab-list {
             background: transparent;
             border-style: solid;
-            border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
+            border-color: var(--border-color);
             border-width: 0 0 1px 0;
         }
 
         .p-tab {
             background: transparent;
             border-width: 0 0 1px 0;
-            border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
-            color: light-dark(var(--p-surface-500), var(--p-surface-400));
+            border-color: var(--border-color);
+            color: var(--text-secondary-color);
             padding: 1rem 1.125rem;
             font-weight: 600;
             transition: none;
             margin: 0 0 -1px 0;
+
+            &:focus-visible {
+                outline: 1px solid var(--designer-focus-outline-color);
+                outline-offset: -1px;
+            }
         }
 
         .p-tab:not(.p-tab-active):not(.p-disabled):hover {
             background: transparent;
             border-color: transparent;
-            color: light-dark(var(--p-surface-700), var(--p-surface-0));
+            color: var(--high-contrast-text-color);
         }
 
         .p-tab-active {
             background: transparent;
-            border-color: transparent;
-            color: light-dark(#09090b, #ffffff);
+            border-color: var(--high-contrast-text-color);
+            color: var(--high-contrast-text-color);
         }
 
         .p-tablist-active-bar {
+            display: none;
             inset-block-end: -1px;
             height: 1px;
-            background: light-dark(#09090b, #ffffff);
+            background: var(--high-contrast-text-color);
             transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
         }
 
@@ -123,23 +150,35 @@
             color: inherit;
             padding: 0.875rem 0 1.125rem 0;
         }
+
+        .p-tabpanel {
+            &:focus-visible {
+                outline: 1px solid var(--designer-focus-outline-color);
+                outline-offset: 0;
+            }
+        }
     }
 
     .p-accordion {
         .p-accordionpanel {
             border-width: 0 0 1px 0;
-            border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
+            border-color: var(--border-color);
         }
 
         .p-accordionheader {
             padding: 1.125rem;
-            color: light-dark(var(--p-surface-500), var(--p-surface-400));
+            color: var(--text-secondary-color);
             background: transparent;
             border-width: 0;
             border-color: unset;
             font-weight: 600;
             border-radius: 4px;
             transition: none;
+
+            &:focus-visible {
+                outline: 1px solid var(--designer-focus-outline-color);
+                outline-offset: -1px;
+            }
         }
 
         .p-accordionpanel:first-child>.p-accordionheader {
@@ -159,13 +198,13 @@
         }
 
         .p-accordionheader-toggle-icon {
-            color: light-dark(var(--p-surface-500), var(--p-surface-400));
+            color: var(--text-secondary-color);
         }
 
         .p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled)>.p-accordionheader:hover,
         .p-accordionpanel:not(.p-disabled).p-accordionpanel-active>.p-accordionheader {
             background: transparent;
-            color: light-dark(var(--p-surface-700), var(--p-surface-0));
+            color: var(--text-color);
         }
 
         .p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon,
@@ -175,7 +214,7 @@
 
         .p-accordioncontent-content {
             border-width: 0;
-            border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
+            border-color: var(--border-color);
             background-color: transparent;
             color: inherit;
             padding: 0 1.125rem 1.125rem 1.125rem;
@@ -184,21 +223,23 @@
 
     .p-fileupload-choose-button {
         padding: 0.5rem 0.75rem;
-        background: light-dark(#09090b, #ffffff);
-        border-color: light-dark(#09090b, #ffffff);
-        color: light-dark(#ffffff, #000000);
+        background: var(--designer-primary-color);
+        border-color: var(--designer-primary-color);
+        color: var(--designer-primary-contrast-color);
         cursor: pointer;
         font-weight: medium;
         border-radius: 4px;
-        transition: background 0.2s;
+        transition: background-color 0.2s;
 
-        &:hover {
-            background: light-dark(#27272a, #f3f4f6);
-            border-color: light-dark(#27272a, #f3f4f6);
+        &:enabled:hover,
+        &:enabled:active {
+            background: var(--designer-primary-emphasis-color);
+            border-color: var(--designer-primary-emphasis-color);
         }
 
-        &:focus-visible {
-            outline: 1px solid light-dark(#09090b, #ffffff);
+        &:enabled:active,
+        &:enabled:focus-visible {
+            outline: 1px solid var(--designer-primary-color);
             outline-offset: 2px;
             box-shadow: none;
         }
diff --git a/apps/showcase/assets/styles/layout/variables/main/_dark.scss b/apps/showcase/assets/styles/layout/variables/main/_dark.scss
index 1e85ae81c..82207f76f 100644
--- a/apps/showcase/assets/styles/layout/variables/main/_dark.scss
+++ b/apps/showcase/assets/styles/layout/variables/main/_dark.scss
@@ -1,14 +1,14 @@
 :root[class="p-dark"] {
-    --primary-text-color:var(--p-primary-400);
+    --primary-text-color: var(--p-primary-400);
     --primary-color: var(--p-primary-color);
-    --primary-contrast-color:var(--p-primary-contrast-color);
+    --primary-contrast-color: var(--p-primary-contrast-color);
     --primary-hover-color: var(--p-primary-hover-color);
     --text-color: var(--p-surface-0);
     --text-secondary-color: var(--p-surface-400);
     --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%);
     --glow-blend: hard-light, color-dodge;
-    --topbar-sticky-background:rgba(0,0,0,.3);
-    --mobile-menu-background: rgba(0,0,0,.3);
+    --topbar-sticky-background: rgba(0, 0, 0, .3);
+    --mobile-menu-background: rgba(0, 0, 0, .3);
     --card-border: 1px solid transparent;
     --card-background: var(--p-surface-900);
     --border-color: var(--p-surface-700);
@@ -25,4 +25,8 @@
     --code-button-text-color: var(--p-surface-300);
     --docsearch-mask-background: var(--p-mask-background);
     --logo-color: var(--text-secondary-color);
+    --designer-primary-color: #ffffff;
+    --designer-primary-emphasis-color: #f3f4f6;
+    --designer-primary-contrast-color: #000000;
+    --designer-focus-outline-color: #ffffff;
 }
\ No newline at end of file
diff --git a/apps/showcase/assets/styles/layout/variables/main/_light.scss b/apps/showcase/assets/styles/layout/variables/main/_light.scss
index a2d43e5d5..0f57f0ac3 100644
--- a/apps/showcase/assets/styles/layout/variables/main/_light.scss
+++ b/apps/showcase/assets/styles/layout/variables/main/_light.scss
@@ -25,4 +25,8 @@
     --code-button-text-color: var(--p-surface-300);
     --docsearch-mask-background: var(--p-mask-background);
     --logo-color: var(--text-secondary-color);
+    --designer-primary-color: #09090b;
+    --designer-primary-emphasis-color: #27272a;
+    --designer-primary-contrast-color: #ffffff;
+    --designer-focus-outline-color: #09090b;
 }
\ No newline at end of file
diff --git a/apps/showcase/components/layout/AppConfigurator.vue b/apps/showcase/components/layout/AppConfigurator.vue
index 6d49874e2..8d2c913cd 100755
--- a/apps/showcase/components/layout/AppConfigurator.vue
+++ b/apps/showcase/components/layout/AppConfigurator.vue
@@ -306,13 +306,6 @@ export default {
             const preset = presets[value];
             const surfacePalette = this.surfaces.find((s) => s.name === this.selectedSurfaceColor)?.palette;
 
-            if (value === 'Material') {
-                document.body.classList.add('material');
-                this.$primevue.config.ripple = true;
-            } else {
-                document.body.classList.remove('material');
-            }
-
             $t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
         },
         onRTLChange(value) {
diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
index 1cdf3533e..59cffc5f9 100644
--- a/apps/showcase/components/layout/AppDesigner.vue
+++ b/apps/showcase/components/layout/AppDesigner.vue
@@ -1,5 +1,5 @@
 <template>
-    <Drawer v-model:visible="$appState.designer.active" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false" @after-show="onShow" @after-hide="onHide">
+    <Drawer v-model:visible="$appState.designer.active" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false" blockScroll @after-show="onShow" @after-hide="onHide">
         <template #container="{ closeCallback }">
             <div class="flex items-center justify-between p-5">
                 <div class="flex items-center gap-2">
@@ -34,7 +34,7 @@
 
 <script>
 import EventBus from '@/app/AppEventBus';
-import { $dt, updatePreset, usePreset } from '@primeuix/themes';
+import { $dt, usePreset } from '@primeuix/themes';
 
 export default {
     setup() {
@@ -53,7 +53,7 @@ export default {
                 activateTheme: this.activateTheme,
                 applyTheme: this.applyTheme,
                 applyFont: this.applyFont,
-                replaceColorPalette: this.replaceColorPalette
+                resolveColor: this.resolveColor
             }
         };
     },
@@ -140,9 +140,10 @@ export default {
         applyTheme(theme) {
             if (this.$appState.designer.verified) {
                 this.saveTheme(theme);
+                this.refreshACTokens();
             }
 
-            updatePreset(theme.preset);
+            usePreset(theme.preset);
             EventBus.emit('theme-palette-change');
         },
         camelCaseToDotCase(name) {
@@ -163,7 +164,7 @@ export default {
                         const regex = /\.\d+$/;
 
                         const tokenName = this.camelCaseToDotCase(parentPath ? parentPath + '.' + key : key);
-                        const tokenValue = $dt(tokenName).value;
+                        const tokenValue = obj[key];
                         const isColor = tokenName.includes('color') || tokenName.includes('background') || regex.test(tokenName);
 
                         this.$appState.designer.acTokens.push({ token: tokenName, label: '{' + tokenName + '}', variable: $dt(tokenName).variable, value: tokenValue, isColor: isColor });
@@ -207,11 +208,6 @@ export default {
                 // silent fail as some fonts may have not all the font weights
             }
         },
-        replaceColorPalette() {
-            this.$appState.designer.theme.preset.semantic.primary = this.$appState.designer.theme.preset.primitive.emerald;
-            this.$appState.designer.theme.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.$appState.designer.theme.preset.primitive.slate };
-            this.$appState.designer.theme.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.$appState.designer.theme.preset.primitive.zinc };
-        },
         toggleDarkMode() {
             EventBus.emit('dark-mode-toggle', { dark: !this.$appState.darkTheme });
         },
@@ -226,7 +222,6 @@ export default {
             usePreset(this.$appState.designer.theme.preset);
             this.applyFont(this.$appState.designer.theme.config.font_family);
             document.documentElement.style.fontSize = this.$appState.designer.theme.config.font_size;
-            this.replaceColorPalette();
             this.refreshACTokens();
         },
         getCookie(name) {
@@ -241,6 +236,14 @@ export default {
             }
 
             return null;
+        },
+        resolveColor(token) {
+            if (token.startsWith('{') && token.endsWith('}')) {
+                let cssVariable = $dt(token).variable.slice(4, -1);
+                return getComputedStyle(document.documentElement).getPropertyValue(cssVariable);
+            } else {
+                return token;
+            }
         }
     },
     computed: {
diff --git a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
index 14050d56d..1d9f23d2e 100644
--- a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
+++ b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
@@ -98,46 +98,13 @@ export default {
     },
     methods: {
         async createThemeFromPreset() {
-            const newPreset = presets[this.basePreset];
-
-            if (this.basePreset === 'Material') {
-                document.body.classList.add('material');
-                this.$primevue.config.ripple = true;
+            if (this.themeName == null || !this.themeName.trim().length) {
+                this.$toast.add({ severity: 'error', summary: 'Error', detail: 'Name is required', life: 3000 });
             } else {
-                document.body.classList.remove('material');
-            }
+                const newPreset = presets[this.basePreset];
 
-            if (this.$appState.designer.verified) {
-                const { data, error } = await $fetch(this.designerApiUrl + '/theme/create', {
-                    method: 'POST',
-                    credentials: 'include',
-                    headers: {
-                        'X-CSRF-Token': this.$appState.designer.csrfToken
-                    },
-                    body: {
-                        name: this.themeName,
-                        preset: newPreset,
-                        project: 'primevue',
-                        config: {
-                            font_size: '14px',
-                            font_family: 'Inter var'
-                        }
-                    }
-                });
-
-                if (error) {
-                    this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
-                } else {
-                    this.loadThemeEditor(data.t_key, newPreset);
-                }
-            } else {
-                this.loadThemeEditor('trial', newPreset);
-            }
-        },
-        async createThemeFromFigma() {
-            if (this.figmaData) {
                 if (this.$appState.designer.verified) {
-                    const { data, error } = await $fetch(this.designerApiUrl + '/theme/figma', {
+                    const { data, error } = await $fetch(this.designerApiUrl + '/theme/create', {
                         method: 'POST',
                         credentials: 'include',
                         headers: {
@@ -145,8 +112,9 @@ export default {
                         },
                         body: {
                             name: this.themeName,
-                            figma_tokens: this.figmaData,
+                            preset: newPreset,
                             project: 'primevue',
+                            base: this.basePreset,
                             config: {
                                 font_size: '14px',
                                 font_family: 'Inter var'
@@ -157,17 +125,52 @@ export default {
                     if (error) {
                         this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
                     } else {
-                        this.loadThemeEditor(data.t_key, data.t_preset);
-
-                        if (data.lostAndFound?.length) {
-                            this.$toast.add({ severity: 'warn', summary: 'Warning', detail: 'There are missing tokens. An update is recommended using the "Migration Assistant" in the settings section.' });
-                        }
+                        this.loadThemeEditor(data.t_key, newPreset);
                     }
                 } else {
-                    this.$toast.add({ severity: 'error', summary: 'An error occured', detail: 'A valid license required', life: 3000 });
+                    this.loadThemeEditor('trial', newPreset);
                 }
+            }
+        },
+        async createThemeFromFigma() {
+            if (this.themeName == null || !this.themeName.trim().length) {
+                this.$toast.add({ severity: 'error', summary: 'Error', detail: 'Name is required', life: 3000 });
             } else {
-                this.$toast.add({ severity: 'error', summary: 'An error occured', detail: 'File is required', life: 3000 });
+                if (this.figmaData) {
+                    if (this.$appState.designer.verified) {
+                        const { data, error } = await $fetch(this.designerApiUrl + '/theme/figma', {
+                            method: 'POST',
+                            credentials: 'include',
+                            headers: {
+                                'X-CSRF-Token': this.$appState.designer.csrfToken
+                            },
+                            body: {
+                                name: this.themeName,
+                                figma_tokens: this.figmaData,
+                                project: 'primevue',
+                                base: 'Figma',
+                                config: {
+                                    font_size: '14px',
+                                    font_family: 'Inter var'
+                                }
+                            }
+                        });
+
+                        if (error) {
+                            this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
+                        } else {
+                            this.loadThemeEditor(data.t_key, data.t_preset);
+
+                            if (data.lostAndFound?.length) {
+                                this.$toast.add({ severity: 'warn', summary: 'Warning', detail: 'There are missing tokens. An update is recommended using the "Migration Assistant" in the settings section.' });
+                            }
+                        }
+                    } else {
+                        this.$toast.add({ severity: 'error', summary: 'An error occured', detail: 'A valid license required', life: 3000 });
+                    }
+                } else {
+                    this.$toast.add({ severity: 'error', summary: 'An error occured', detail: 'File is required', life: 3000 });
+                }
             }
         },
         onFileSelect(event) {
@@ -199,10 +202,13 @@ export default {
                     font_family: 'Inter var'
                 }
             };
-            this.designerService.replaceColorPalette();
+            this.designerService.applyFont('Inter var');
+            document.documentElement.style.fontSize = '14px';
+
             usePreset(preset);
             this.designerService.refreshACTokens();
 
+            this.$appState.designer.activeTab = '0';
             this.$appState.designer.activeView = 'editor';
         }
     }
diff --git a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
index c2232b302..0f12e95b1 100644
--- a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
+++ b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
@@ -6,11 +6,17 @@
     </div>
 
     <div class="text-lg font-semibold mb-2">Authenticate</div>
-    <span class="block text-muted-color leading-6 mb-4"
-        >A license can be purchased from PrimeStore, if you do not have a license key, you are still able to experience the Designer in trial mode. In trial mode, downloads, figma to code, migration assistant and cloud storage are not available.
-        <NuxtLink to="/designer" class="doc-link">Learn more</NuxtLink> about the Theme Designer.</span
-    >
-    <span class="block text-muted-color leading-6 mb-4">License key and pass key are available at <a href="https://primefaces.org/store/designer.xhtml" class="doc-link" rel="noopener noreferrer">PrimeStore</a>.</span>
+    <div v-if="!$appState.designer.verified">
+        <span class="block leading-6 mb-4"
+            >Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to code, cloud storage, and migration assistant. <NuxtLink to="/designer" class="doc-link">Discover</NuxtLink> more about the
+            Theme Designer by visiting the detailed <NuxtLink to="/designer/guide" class="doc-link">documentation</NuxtLink></span
+        >
+        <span class="block leading-6 mb-4"
+            >A license can be purchased from <a href="https://primefaces.org/store/designer.xhtml" class="doc-link" rel="noopener noreferrer">PrimeStore</a>, if you do not have a license key, you are still able to experience the Designer in trial
+            mode. Note that in trial mode, downloads, figma to code, migration assistant and cloud storage are not available.</span
+        >
+        <span class="block leading-6 mb-4">Sign-in at <a href="https://primefaces.org/store/designer.xhtml" class="doc-link" rel="noopener noreferrer">PrimeStore</a> to retrieve your license key along with the pass key.</span>
+    </div>
     <form v-if="!$appState.designer.verified" @submit.prevent class="flex gap-4">
         <input v-model="licenseKey" type="password" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 flex-1" placeholder="License Key" />
         <input v-model="otp" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700" placeholder="Pass Key" />
@@ -40,7 +46,7 @@
             ]"
             @click="openNewTheme"
         >
-            <i class="pi pi-plus !text-2xl"></i>
+            <i class="pi pi-plus"></i>
         </button>
         <template v-if="loading">
             <Skeleton class="!rounded-xl !h-32 !w-32">-</Skeleton>
@@ -57,8 +63,8 @@
                 </button>
                 <div class="flex flex-col items-center gap-1">
                     <div class="group flex items-center gap-2 relative">
-                        <input v-model="theme.t_name" type="text" class="w-24 text-sm px-2 text-center" maxlength="100" @blur="renameTheme(theme)" />
-                        <i class="hidden group-hover:block pi pi-pencil !text-sm absolute top-50 right-0 text-muted-color"></i>
+                        <input v-model="theme.t_name" type="text" class="w-24 text-sm px-2 text-center pr-4" maxlength="100" @blur="renameTheme(theme)" />
+                        <i class="hidden group-hover:block pi pi-pencil !text-xs absolute top-50 text-muted-color" style="right: 2px"></i>
                     </div>
                     <span class="text-muted-color text-xs">{{ formatTimestamp(theme.t_last_updated) }}</span>
                 </div>
@@ -189,8 +195,6 @@ export default {
                 this.currentTheme = null;
 
                 usePreset(Aura);
-                document.body.classList.remove('material');
-                this.$primevue.config.ripple = false;
             }
         },
         openNewTheme() {
@@ -227,6 +231,7 @@ export default {
                 this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
             } else {
                 this.designerService.activateTheme(data);
+                this.$appState.designer.activeTab = '0';
                 this.$appState.designer.activeView = 'editor';
             }
         },
diff --git a/apps/showcase/components/layout/designer/editor/DesignColorPalette.vue b/apps/showcase/components/layout/designer/editor/DesignColorPalette.vue
index d83d7425d..bbed58074 100644
--- a/apps/showcase/components/layout/designer/editor/DesignColorPalette.vue
+++ b/apps/showcase/components/layout/designer/editor/DesignColorPalette.vue
@@ -1,11 +1,12 @@
 <template>
     <div class="flex flex-1 border border-surface rounded-l-lg rounded-r-lg overflow-hidden">
-        <div v-for="color of value" :key="color" class="flex-1 h-8" :style="{ backgroundColor: color }" :title="color"></div>
+        <div v-for="color of value" :key="color" class="flex-1 h-8" :style="{ backgroundColor: designerService.resolveColor(color) }" :title="color"></div>
     </div>
 </template>
 
 <script>
 export default {
+    inject: ['designerService'],
     props: {
         value: {
             type: Object,
diff --git a/apps/showcase/components/layout/designer/editor/DesignTokenField.vue b/apps/showcase/components/layout/designer/editor/DesignTokenField.vue
index 4585a33e7..6fe571dda 100644
--- a/apps/showcase/components/layout/designer/editor/DesignTokenField.vue
+++ b/apps/showcase/components/layout/designer/editor/DesignTokenField.vue
@@ -2,7 +2,7 @@
     <div class="group">
         <div class="flex justify-between justify-items-center">
             <label :for="inputId" class="text-xs text-zinc-700 dark:text-white/70 block capitalize text-ellipsis overflow-hidden w-full whitespace-nowrap mb-px" :title="label">{{ label }}</label>
-            <button v-if="switchable" type="button" @click="transfer">
+            <button v-if="switchable" type="button" @click="transfer" tabindex="-1">
                 <i class="pi pi-sort-alt !text-xs text-zinc-500 dark:text-white/50 hidden group-hover:block animate-fadein" title="Transfer between color scheme and common"></i>
             </button>
         </div>
@@ -10,6 +10,7 @@
             <AutoComplete
                 :modelValue="modelValue"
                 @input="onInput"
+                @blur="onBlur"
                 :inputId="inputId"
                 :suggestions="items"
                 @complete="search"
@@ -34,7 +35,7 @@
                 <template #option="slotProps">
                     <div v-tooltip.left="slotProps.option.value" class="flex items-center justify-between gap-4 px-2">
                         <span>{{ slotProps.option.token }}</span>
-                        <div v-if="slotProps.option.isColor" class="border border-surface-200 dark:border-surface-700 w-4 h-4 rounded-full" :style="{ backgroundColor: slotProps.option.variable }"></div>
+                        <div v-if="slotProps.option.isColor" class="border border-surface-200 dark:border-surface-700 w-4 h-4 rounded-full" :style="{ backgroundColor: designerService.resolveColor(slotProps.option.value) }"></div>
                         <div v-else class="text-xs max-w-16 text-ellipsis whitespace-nowrap overflow-hidden">
                             {{ slotProps.option.value }}
                         </div>
@@ -47,11 +48,12 @@
 </template>
 
 <script>
-import { uuid } from '@primeuix/utils';
 import { $dt } from '@primeuix/themes';
+import { uuid } from '@primeuix/utils';
 
 export default {
     emits: ['update:modelValue'],
+    inject: ['designerService'],
     props: {
         label: {
             type: String,
@@ -212,6 +214,9 @@ export default {
             delete current[lastKey];
 
             return true;
+        },
+        onBlur() {
+            this.designerService.refreshACTokens();
         }
     },
     computed: {
diff --git a/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue b/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue
index fa9c6d40c..c51946d4d 100644
--- a/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue
+++ b/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue
@@ -28,6 +28,8 @@
 </template>
 
 <script>
+import { usePreset } from '@primeuix/themes';
+
 export default {
     inject: ['designerService'],
     data() {
@@ -61,6 +63,7 @@ export default {
             });
 
             this.designerService.saveTheme(this.$appState.designer.theme);
+            usePreset(this.$appState.designer.theme.preset);
             this.designerService.refreshACTokens();
             this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Tokens saved', life: 3000 });
         },
diff --git a/apps/showcase/components/layout/designer/editor/primitive/DesignColors.vue b/apps/showcase/components/layout/designer/editor/primitive/DesignColors.vue
index 66e4075d0..3da30bf24 100644
--- a/apps/showcase/components/layout/designer/editor/primitive/DesignColors.vue
+++ b/apps/showcase/components/layout/designer/editor/primitive/DesignColors.vue
@@ -4,7 +4,7 @@
             <section v-if="key !== 'borderRadius'" class="flex justify-between items-center mb-4 gap-8">
                 <div class="flex gap-2 items-center">
                     <span class="text-sm capitalize block w-20">{{ key }}</span>
-                    <input :value="$appState.designer.theme.preset.primitive[key]['500']" @input="onColorChange($event, key)" type="color" />
+                    <input :value="designerService.resolveColor($appState.designer.theme.preset.primitive[key]['500'])" @input="onColorChange($event, key)" type="color" @blur="onBlur" />
                 </div>
                 <DesignColorPalette :value="$appState.designer.theme.preset.primitive[key]" />
             </section>
@@ -16,9 +16,13 @@
 import { palette } from '@primeuix/themes';
 
 export default {
+    inject: ['designerService'],
     methods: {
         onColorChange(event, color) {
             this.$appState.designer.theme.preset.primitive[color] = palette(event.target.value);
+        },
+        onBlur() {
+            this.designerService.refreshACTokens();
         }
     }
 };
diff --git a/apps/showcase/components/layout/designer/editor/semantic/DesignGeneral.vue b/apps/showcase/components/layout/designer/editor/semantic/DesignGeneral.vue
index 99ad6eb3d..f25f12607 100644
--- a/apps/showcase/components/layout/designer/editor/semantic/DesignGeneral.vue
+++ b/apps/showcase/components/layout/designer/editor/semantic/DesignGeneral.vue
@@ -3,7 +3,7 @@
         <section class="flex justify-between items-center mb-5 gap-8">
             <div class="flex gap-2 items-center">
                 <span class="text-sm">Primary</span>
-                <input :value="$appState.designer.theme.preset.semantic.primary['500']" @input="onPrimaryColorChange($event)" type="color" />
+                <input :value="designerService.resolveColor($appState.designer.theme.preset.semantic.primary['500'])" @input="onPrimaryColorChange($event)" type="color" class="w-0 h-0" @onBlur="onColorPickerBlur" />
             </div>
             <DesignColorPalette :value="$appState.designer.theme.preset.semantic.primary" />
         </section>
@@ -52,9 +52,13 @@
 import { palette } from '@primeuix/themes';
 
 export default {
+    inject: ['designerService'],
     methods: {
         onPrimaryColorChange(event) {
             this.$appState.designer.theme.preset.semantic.primary = palette(event.target.value);
+        },
+        onColorPickerBlur() {
+            this.designerService.refreshACTokens();
         }
     }
 };
diff --git a/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSCommon.vue b/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSCommon.vue
index 541a791ab..489ec3753 100644
--- a/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSCommon.vue
+++ b/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSCommon.vue
@@ -3,7 +3,7 @@
         <section class="flex justify-between items-center mb-5 gap-8">
             <div class="flex gap-2 items-center">
                 <span class="text-sm">Surface</span>
-                <input :value="$colorScheme.surface['500']" @input="onSurfaceColorChange($event)" type="color" />
+                <input :value="designerService.resolveColor($colorScheme.surface['500'])" @input="onSurfaceColorChange($event)" type="color" @blur="onColorPickerBlur" />
             </div>
             <DesignColorPalette :value="$colorScheme.surface" />
         </section>
@@ -82,10 +82,13 @@
 import { palette } from '@primeuix/themes';
 
 export default {
-    inject: ['$colorScheme'],
+    inject: ['$colorScheme', 'designerService'],
     methods: {
         onSurfaceColorChange(event) {
             this.$colorScheme.surface = { ...{ 0: '#ffffff' }, ...palette(event.target.value) };
+        },
+        onColorPickerBlur() {
+            this.designerService.refreshACTokens();
         }
     }
 };
diff --git a/apps/showcase/nuxt.config.js b/apps/showcase/nuxt.config.js
index 25a099929..8bb2921fa 100644
--- a/apps/showcase/nuxt.config.js
+++ b/apps/showcase/nuxt.config.js
@@ -73,8 +73,7 @@ export default defineNuxtConfig({
             ],
             link: [
                 { rel: 'icon', href: baseUrl + 'favicon.ico' },
-                { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' },
-                { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:400|Roboto:500|Roboto:600|Roboto:700', fetchpriority: 'low' }
+                { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' }
             ],
             script: [
                 {