diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
index 7f21aba609..e3e6cf3273 100644
--- a/apps/showcase/components/layout/AppDesigner.vue
+++ b/apps/showcase/components/layout/AppDesigner.vue
@@ -65,27 +65,30 @@ export default {
             this.deferredTabs = true;
         },
         async downloadTheme(theme) {
-            try {
-                const response = await $fetch(this.designerApiBase + '/theme/download/' + this.$appState.designer.licenseKey + '/' + theme.t_key, {
-                    responseType: 'blob'
-                });
+            if (!this.$appState.designer.licenseKey) {
+                this.$toast.add({ severity: 'error', summary: 'Not Available', detail: 'A license is required to download', life: 3000 });
+            } else {
+                try {
+                    const response = await $fetch(this.designerApiBase + '/theme/download/' + this.$appState.designer.licenseKey + '/' + theme.t_key, {
+                        responseType: 'blob'
+                    });
 
-                if (response.error) {
-                    this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
-                } else {
-                    const blobUrl = window.URL.createObjectURL(response);
-                    const link = document.createElement('a');
+                    if (response.error) {
+                        this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
+                    } else {
+                        const blobUrl = window.URL.createObjectURL(response);
+                        const link = document.createElement('a');
 
-                    link.href = blobUrl;
-                    link.download = theme.t_name + '.zip';
-                    document.body.appendChild(link);
-                    link.click();
-                    document.body.removeChild(link);
-                    window.URL.revokeObjectURL(blobUrl);
+                        link.href = blobUrl;
+                        link.download = theme.t_name + '.zip';
+                        document.body.appendChild(link);
+                        link.click();
+                        document.body.removeChild(link);
+                        window.URL.revokeObjectURL(blobUrl);
+                    }
+                } catch (err) {
+                    this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: 'Failed to download file', life: 3000 });
                 }
-            } catch (err) {
-                console.log(err);
-                this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: 'Failed to download file', life: 3000 });
             }
         },
         async updateTheme(theme) {
@@ -104,7 +107,10 @@ export default {
             }
         },
         applyTheme(theme) {
-            this.updateTheme(theme);
+            if (this.$appState.designer.licenseKey) {
+                this.updateTheme(theme);
+            }
+
             updatePreset(theme.preset);
             EventBus.emit('theme-palette-change');
         },
diff --git a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
index 9b8c1d699a..81f1c559c8 100644
--- a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
+++ b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
@@ -96,43 +96,55 @@ export default {
                 document.body.classList.remove('material');
             }
 
-            const { data, error } = await $fetch(this.designerApiBase + '/theme/create', {
-                method: 'POST',
-                body: {
-                    name: this.themeName,
-                    preset: newPreset,
-                    license_key: this.$appState.designer.licenseKey,
-                    config: {
-                        font_size: '14px',
-                        font_family: 'Inter var'
+            if (this.$appState.designer.licenseKey) {
+                const { data, error } = await $fetch(this.designerApiBase + '/theme/create', {
+                    method: 'POST',
+                    body: {
+                        name: this.themeName,
+                        preset: newPreset,
+                        license_key: this.$appState.designer.licenseKey,
+                        config: {
+                            font_size: '14px',
+                            font_family: 'Inter var'
+                        }
                     }
-                }
-            });
+                });
 
-            if (error) {
-                this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
+                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(data.t_key, newPreset);
+                this.loadThemeEditor('trial', newPreset);
             }
         },
         async createThemeFromFigma() {
-            const { data, error } = await $fetch(this.designerApiBase + '/theme/figma', {
-                method: 'POST',
-                body: {
-                    name: this.themeName,
-                    figma_tokens: this.figmaData,
-                    license_key: this.$appState.designer.licenseKey,
-                    config: {
-                        font_size: '14px',
-                        font_family: 'Inter var'
+            if (this.figmaData) {
+                if (this.$appState.designer.licenseKey) {
+                    const { data, error } = await $fetch(this.designerApiBase + '/theme/figma', {
+                        method: 'POST',
+                        body: {
+                            name: this.themeName,
+                            figma_tokens: this.figmaData,
+                            license_key: this.$appState.designer.licenseKey,
+                            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.$toast.add({ severity: 'error', summary: 'An error occured', detail: 'A valid license required', life: 3000 });
                 }
-            });
-
-            if (error) {
-                this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
             } else {
-                this.loadThemeEditor(data.t_key, newPreset);
+                this.$toast.add({ severity: 'error', summary: 'An error occured', detail: 'File is required', life: 3000 });
             }
         },
         onFileSelect(event) {
diff --git a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
index e9f0115bfd..55f0ebd1d9 100644
--- a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
+++ b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
@@ -1,16 +1,17 @@
 <template>
     <div class="text-lg font-semibold mb-2">License Key</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 use the Designer in free tier. <NuxtLink to="/designer" class="doc-link">Learn more</NuxtLink> about the Theme Designer.</span
+        >A license can be purchased from PrimeStore, if you do not have a license key, you are still able to experience the Designer with limited features. <NuxtLink to="/designer" class="doc-link">Learn more</NuxtLink> about the Theme
+        Designer.</span
     >
     <form @submit.prevent class="flex gap-4">
-        <input v-model="$appState.designer.licenseKey" type="password" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 flex-1" />
+        <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" />
         <button
             type="button"
             @click="activate(false)"
             icon="pi pi-download"
-            :disabled="!$appState.designer.licenseKey"
-            class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60"
+            :disabled="!licenseKey"
+            class="px-3 py-2 bg-zinc-950 disabled:hover:bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:disabled:hover:bg-white dark:text-black rounded-md font-medium cursor-pointer disabled:cursor-auto transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60"
         >
             Activate
         </button>
@@ -71,6 +72,7 @@ export default {
     inject: ['designerService'],
     data() {
         return {
+            licenseKey: null,
             loading: false,
             currentTheme: null,
             confirmDialogVisible: false,
@@ -115,7 +117,7 @@ export default {
             const keyValue = localStorage.getItem(this.$appState.designer.localStoreKey);
 
             if (keyValue) {
-                this.$appState.designer.licenseKey = keyValue;
+                this.licenseKey = keyValue;
                 this.activate(true);
             }
         } else {
@@ -124,13 +126,14 @@ export default {
     },
     methods: {
         async activate(silent) {
-            this.loading = true;
-            const { data, error } = await $fetch(this.designerApiBase + '/license/verify/' + this.$appState.designer.licenseKey);
+            const { data, error } = await $fetch(this.designerApiBase + '/license/verify/' + this.licenseKey);
 
             if (error) {
                 this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
             } else {
                 if (data.valid) {
+                    this.$appState.designer.licenseKey = this.licenseKey;
+
                     if (!silent) {
                         this.$toast.add({ severity: 'success', summary: 'Success', detail: 'License is activated.', life: 3000 });
                     }
@@ -142,13 +145,12 @@ export default {
                     this.$appState.designer.themes = [];
                 }
             }
-
-            this.loading = false;
         },
         openNewTheme() {
             this.$appState.designer.activeView = 'create_theme';
         },
         async loadThemes() {
+            this.loading = true;
             const { data, error } = await $fetch(this.designerApiBase + '/theme/list/' + this.$appState.designer.licenseKey);
 
             if (error) {
@@ -156,6 +158,8 @@ export default {
             } else {
                 this.$appState.designer.themes = data;
             }
+
+            this.loading = false;
         },
         async loadTheme(theme) {
             const { data, error } = await $fetch(this.designerApiBase + '/theme/load/' + this.$appState.designer.licenseKey + '/' + theme.t_key);