diff --git a/plugin/plugins/dynamix.unraid.net.plg b/plugin/plugins/dynamix.unraid.net.plg
index 8b92a098f..1c825ba7d 100755
--- a/plugin/plugins/dynamix.unraid.net.plg
+++ b/plugin/plugins/dynamix.unraid.net.plg
@@ -301,6 +301,8 @@ if [ -f /tmp/restore-files-dynamix-unraid-net ]; then
     "/usr/local/emhttp/plugins/dynamix.my.servers/data/server-state.php"
     "/usr/local/emhttp/plugins/dynamix.my.servers/include/reboot-details.php"
     "/usr/local/emhttp/plugins/dynamix.my.servers/include/translations.php"
+    "/usr/local/emhttp/plugins/dynamix.my.servers/include/web-components-extractor.php"
+    "/usr/local/emhttp/plugins/dynamix.my.servers/include/activation-code-extractor.php"
   )
 
   for FILE in "${FILES_TO_RESTORE[@]}"; do
@@ -424,6 +426,8 @@ preserveFilesDirs=(
   "move:/usr/local/emhttp/plugins/dynamix.my.servers/data/server-state.php:preventDowngrade"
   "move:/usr/local/emhttp/plugins/dynamix.my.servers/include/reboot-details.php:preventDowngrade"
   "move:/usr/local/emhttp/plugins/dynamix.my.servers/include/translations.php:preventDowngrade"
+  "move:/usr/local/emhttp/plugins/dynamix.my.servers/include/web-components-extractor.php:preventDowngrade"
+  "move:/usr/local/emhttp/plugins/dynamix.my.servers/include/activation-code-extractor.php:preventDowngrade"
   "copy:/usr/local/emhttp/plugins/dynamix/include/DefaultPageLayout.php:preventDowngrade"
 )
 
diff --git a/web/components/ThemeSwitcher.ce.vue b/web/components/ThemeSwitcher.ce.vue
index 687d2ee1d..06f7de907 100644
--- a/web/components/ThemeSwitcher.ce.vue
+++ b/web/components/ThemeSwitcher.ce.vue
@@ -34,7 +34,8 @@ const computedThemes = computed(() => {
 });
 
 const { csrf } = storeToRefs(useServerStore());
-const devModeEnabled = import.meta.env.VITE_ALLOW_CONSOLE_LOGS;
+const storageKey = 'enableThemeSwitcher';
+const enableThemeSwitcher = sessionStorage.getItem(storageKey) === 'true' || localStorage.getItem(storageKey) === 'true';
 const submitting = ref<boolean>(false);
 
 const handleThemeChange = (event: Event) => {
@@ -73,7 +74,7 @@ const handleThemeChange = (event: Event) => {
 
 <template>
   <select
-    v-if="devModeEnabled"
+    v-if="enableThemeSwitcher"
     :disabled="submitting"
     :value="props.current"
     class="text-xs relative float-left mr-2 text-white bg-black"
diff --git a/web/scripts/sync-webgui-repo.js b/web/scripts/sync-webgui-repo.js
index 668a212b4..7c2d5d892 100644
--- a/web/scripts/sync-webgui-repo.js
+++ b/web/scripts/sync-webgui-repo.js
@@ -4,7 +4,10 @@ const ignore = require('ignore');
 const readline = require('readline');
 const diff = require('diff');
 const crypto = require('crypto');
-const chalk = require('chalk');
+let chalk;
+(async () => {
+  chalk = await import('chalk');
+})();
 
 const CONSTANTS = {
   PATHS: {
@@ -18,8 +21,11 @@ const CONSTANTS = {
     WEBGUI: 'emhttp/plugins',
   },
   WEB_COMPONENTS: {
-    API_PATH: 'web/.nuxt/nuxt-custom-elements/dist/unraid-components',
-    WEBGUI_PATH: 'emhttp/plugins/dynamix.my.servers/unraid-components/nuxt',
+    API_WEB_BUILD_PATH: 'web/.nuxt/nuxt-custom-elements/dist/unraid-components',
+    API_UI_BUILD_PATH: 'unraid-ui/dist-wc',
+    WEBGUI_BASE_PATH: 'emhttp/plugins/dynamix.my.servers/unraid-components',
+    WEBGUI_WEB_SUBPATH: 'nuxt',
+    WEBGUI_UI_SUBPATH: 'uui',
   },
 };
 
@@ -175,17 +181,17 @@ const FileOps = {
     );
 
     if (differences.split('\n').length > 5) {
-      console.log('\nDiff for', chalk.cyan(path.basename(apiFile)));
-      console.log(chalk.red('--- webgui:'), webguiFile);
-      console.log(chalk.green('+++ api:  '), apiFile);
+      console.log('\nDiff for', chalk.default.cyan(path.basename(apiFile)));
+      console.log(chalk.default.red('--- webgui:'), webguiFile);
+      console.log(chalk.default.green('+++ api:  '), apiFile);
 
       differences
         .split('\n')
         .slice(5)
         .forEach((line) => {
-          if (line.startsWith('+')) console.log(chalk.green(line));
-          else if (line.startsWith('-')) console.log(chalk.red(line));
-          else if (line.startsWith('@')) console.log(chalk.cyan(line));
+          if (line.startsWith('+')) console.log(chalk.default.green(line));
+          else if (line.startsWith('-')) console.log(chalk.default.red(line));
+          else if (line.startsWith('@')) console.log(chalk.default.cyan(line));
           else console.log(line);
         });
       return true;
@@ -279,16 +285,43 @@ const Features = {
     try {
       await new Promise((resolve, reject) => {
         const buildProcess = exec('pnpm run build', { cwd: webDir });
-
         buildProcess.stdout.on('data', (data) => process.stdout.write(data));
         buildProcess.stderr.on('data', (data) => process.stderr.write(data));
-
         buildProcess.on('exit', (code) => {
           if (code === 0) {
-            UI.log('Build completed successfully!', 'success');
+            UI.log('Web components build completed successfully!', 'success');
             resolve();
           } else {
-            reject(new Error(`Build failed with code ${code}`));
+            reject(new Error(`Web components build failed with code ${code}`));
+          }
+        });
+      });
+    } catch (err) {
+      UI.log(`Error during build: ${err.message}`, 'error');
+    }
+  },
+
+  async handleUiComponentBuild() {
+    const uiDir = path.join(global.apiProjectDir, 'unraid-ui');
+    if (!fs.existsSync(uiDir)) {
+      UI.log('Unraid UI directory not found in API repo!', 'error');
+      return;
+    }
+
+    UI.log('Building UI components...', 'info');
+    const { exec } = require('child_process');
+
+    try {
+      await new Promise((resolve, reject) => {
+        const buildProcess = exec('pnpm run build && pnpm run build:wc', { cwd: uiDir });
+        buildProcess.stdout.on('data', (data) => process.stdout.write(data));
+        buildProcess.stderr.on('data', (data) => process.stderr.write(data));
+        buildProcess.on('exit', (code) => {
+          if (code === 0) {
+            UI.log('UI build completed successfully!', 'success');
+            resolve();
+          } else {
+            reject(new Error(`UI build failed with code ${code}`));
           }
         });
       });
@@ -298,29 +331,54 @@ const Features = {
   },
 
   async handleWebComponentSync() {
-    const apiPath = path.join(global.apiProjectDir, CONSTANTS.WEB_COMPONENTS.API_PATH);
-    const webguiPath = path.join(global.webguiProjectDir, CONSTANTS.WEB_COMPONENTS.WEBGUI_PATH);
+    const apiWebPath = path.join(global.apiProjectDir, CONSTANTS.WEB_COMPONENTS.API_WEB_BUILD_PATH);
+    const webguiBasePath = path.join(global.webguiProjectDir, CONSTANTS.WEB_COMPONENTS.WEBGUI_BASE_PATH);
+    const webguiWebPath = path.join(webguiBasePath, CONSTANTS.WEB_COMPONENTS.WEBGUI_WEB_SUBPATH);
 
     try {
-      if (!fs.existsSync(apiPath)) {
-        UI.log('Source directory not found! Did you build the web components?', 'error');
+      if (!fs.existsSync(apiWebPath)) {
+        UI.log('Web components source directory not found! Did you build the web components?', 'error');
         return;
       }
 
-      UI.log('Removing old _nuxt directory...', 'info');
-      fs.rmSync(`${webguiPath}/_nuxt`, { recursive: true, force: true });
+      UI.log('Removing old web components...', 'info');
+      fs.rmSync(webguiWebPath, { recursive: true, force: true });
 
-      UI.log('Copying new files...', 'info');
-      FileSystem.copyDirectory(apiPath, webguiPath);
+      UI.log('Copying new web components...', 'info');
+      FileSystem.copyDirectory(apiWebPath, webguiWebPath);
 
-      const indexPath = path.join(webguiPath, 'index.html');
+      const indexPath = path.join(webguiWebPath, 'index.html');
       if (fs.existsSync(indexPath)) {
         UI.log('Removing irrelevant index.html...', 'info');
         fs.unlinkSync(indexPath);
       }
 
       UI.playSound();
-      UI.log('Files copied successfully!', 'success');
+      UI.log('Web components copied successfully!', 'success');
+    } catch (err) {
+      UI.log(`Error during sync: ${err.message}`, 'error');
+    }
+  },
+
+  async handleUiComponentSync() {
+    const apiUiPath = path.join(global.apiProjectDir, CONSTANTS.WEB_COMPONENTS.API_UI_BUILD_PATH);
+    const webguiBasePath = path.join(global.webguiProjectDir, CONSTANTS.WEB_COMPONENTS.WEBGUI_BASE_PATH);
+    const webguiUiPath = path.join(webguiBasePath, CONSTANTS.WEB_COMPONENTS.WEBGUI_UI_SUBPATH);
+
+    try {
+      if (!fs.existsSync(apiUiPath)) {
+        UI.log('Unraid UI source directory not found!', 'error');
+        return;
+      }
+
+      UI.log('Removing old UI components...', 'info');
+      fs.rmSync(webguiUiPath, { recursive: true, force: true });
+
+      UI.log('Copying new UI components...', 'info');
+      FileSystem.copyDirectory(apiUiPath, webguiUiPath);
+
+      UI.playSound();
+      UI.log('UI components copied successfully!', 'success');
     } catch (err) {
       UI.log(`Error during sync: ${err.message}`, 'error');
     }
@@ -510,17 +568,19 @@ const Features = {
 
 const Menu = {
   async show() {
-    while (true) { // Keep showing menu until exit
+    while (true) {
       try {
         console.log('\nWhat you trying to do fam?');
         console.log('1. Find new plugin files in API project');
         console.log('2. Handle new plugin files in API project');
         console.log('3. Sync shared files between API and webgui');
-        console.log('4. Build web components');
-        console.log('5. Sync web components');
-        console.log('6. Exit\n');
+        console.log('4. Build UI components');
+        console.log('5. Sync UI components');
+        console.log('6. Build web components');
+        console.log('7. Sync web components');
+        console.log('8. Exit\n');
 
-        const answer = await UI.question('Choose an option (1-6): ');
+        const answer = await UI.question('Choose an option (1-8): ');
 
         switch (answer) {
           case '1': {
@@ -574,25 +634,32 @@ const Menu = {
                 } else {
                   UI.log('Files are identical', 'success');
                 }
-                console.log('');
               }
             }
             break;
           }
 
           case '4':
-            await Features.handleWebComponentBuild();
+            await Features.handleUiComponentBuild();
             break;
 
           case '5':
-            await Features.handleWebComponentSync();
+            await Features.handleUiComponentSync();
             break;
 
           case '6':
+            await Features.handleWebComponentBuild();
+            break;
+
+          case '7':
+            await Features.handleWebComponentSync();
+            break;
+
+          case '8':
             UI.log('Safe bruv, catch you later! 👋', 'success');
             UI.rl.close();
             process.exit(0);
-            return; // Exit the loop
+            return;
 
           default:
             UI.log("Nah fam, that's not a valid option!", 'error');
diff --git a/web/store/account.ts b/web/store/account.ts
index c64b3a666..4e135cab7 100644
--- a/web/store/account.ts
+++ b/web/store/account.ts
@@ -31,6 +31,7 @@ export const useAccountStore = defineStore('account', () => {
 
   const serverAccountPayload = computed(() => serverStore.serverAccountPayload);
   const inIframe = computed(() => serverStore.inIframe);
+  const sendType = computed(() => callbackStore.sendType);
 
   // State
   const accountAction = ref<ExternalSignIn | ExternalSignOut>();
@@ -84,6 +85,7 @@ export const useAccountStore = defineStore('account', () => {
         type: 'downgradeOs',
       }],
       inIframe.value ? 'newTab' : (autoRedirectReplace ? 'replace' : undefined),
+      sendType.value,
     );
   };
 
@@ -97,6 +99,7 @@ export const useAccountStore = defineStore('account', () => {
         type: 'manage',
       }],
       inIframe.value ? 'newTab' : undefined,
+      sendType.value,
     );
   };
   const myKeys = async () => {
@@ -114,6 +117,7 @@ export const useAccountStore = defineStore('account', () => {
         type: 'myKeys',
       }],
       inIframe.value ? 'newTab' : undefined,
+      sendType.value,
     );
   };
   const linkKey = async () => {
@@ -131,6 +135,7 @@ export const useAccountStore = defineStore('account', () => {
         type: 'linkKey',
       }],
       inIframe.value ? 'newTab' : undefined,
+      sendType.value,
     );
   };
   const recover = () => {
@@ -143,6 +148,7 @@ export const useAccountStore = defineStore('account', () => {
         type: 'recover',
       }],
       inIframe.value ? 'newTab' : undefined,
+      sendType.value,
     );
   };
   const replace = () => {
@@ -155,6 +161,7 @@ export const useAccountStore = defineStore('account', () => {
         type: 'replace',
       }],
       inIframe.value ? 'newTab' : undefined,
+      sendType.value,
     );
   };
   const signIn = () => {
@@ -167,6 +174,7 @@ export const useAccountStore = defineStore('account', () => {
         type: 'signIn',
       }],
       inIframe.value ? 'newTab' : undefined,
+      sendType.value,
     );
   };
   const signOut = () => {
@@ -179,6 +187,7 @@ export const useAccountStore = defineStore('account', () => {
         type: 'signOut',
       }],
       inIframe.value ? 'newTab' : undefined,
+      sendType.value,
     );
   };
   const trialExtend = () => {
@@ -191,6 +200,7 @@ export const useAccountStore = defineStore('account', () => {
         type: 'trialExtend',
       }],
       inIframe.value ? 'newTab' : undefined,
+      sendType.value,
     );
   };
   const trialStart = () => {
@@ -203,6 +213,7 @@ export const useAccountStore = defineStore('account', () => {
         type: 'trialStart',
       }],
       inIframe.value ? 'newTab' : undefined,
+      sendType.value,
     );
   };
 
diff --git a/web/store/purchase.ts b/web/store/purchase.ts
index 625d4be26..b346cd4cc 100644
--- a/web/store/purchase.ts
+++ b/web/store/purchase.ts
@@ -14,16 +14,21 @@ export const usePurchaseStore = defineStore('purchase', () => {
   const callbackStore = useCallbackActionsStore();
   const serverStore = useServerStore();
 
+  const serverPurchasePayload = computed(() => serverStore.serverPurchasePayload);
+  const inIframe = computed(() => serverStore.inIframe);
+  const sendType = computed(() => callbackStore.sendType);
+
   const activate = () => {
     callbackStore.send(
       PURCHASE_CALLBACK.toString(),
       [{
         server: {
-          ...serverStore.serverPurchasePayload,
+          ...serverPurchasePayload.value,
         },
         type: 'activate',
       }],
-      serverStore.inIframe ? 'newTab' : undefined,
+      inIframe.value ? 'newTab' : undefined,
+      sendType.value,
     );
   };
   const redeem = () => {
@@ -31,11 +36,12 @@ export const usePurchaseStore = defineStore('purchase', () => {
       PURCHASE_CALLBACK.toString(),
       [{
         server: {
-          ...serverStore.serverPurchasePayload,
+          ...serverPurchasePayload.value,
         },
         type: 'redeem',
       }],
-      serverStore.inIframe ? 'newTab' : undefined,
+      inIframe.value ? 'newTab' : undefined,
+      sendType.value,
     );
   };
   const purchase = () => {
@@ -43,11 +49,12 @@ export const usePurchaseStore = defineStore('purchase', () => {
       PURCHASE_CALLBACK.toString(),
       [{
         server: {
-          ...serverStore.serverPurchasePayload,
+          ...serverPurchasePayload.value,
         },
         type: 'purchase',
       }],
-      serverStore.inIframe ? 'newTab' : undefined,
+      inIframe.value ? 'newTab' : undefined,
+      sendType.value,
     );
   };
   const upgrade = () => {
@@ -55,11 +62,12 @@ export const usePurchaseStore = defineStore('purchase', () => {
       PURCHASE_CALLBACK.toString(),
       [{
         server: {
-          ...serverStore.serverPurchasePayload,
+          ...serverPurchasePayload.value,
         },
         type: 'upgrade',
       }],
-      serverStore.inIframe ? 'newTab' : undefined,
+      inIframe.value ? 'newTab' : undefined,
+      sendType.value,
     );
   };
   const renew = () => {
@@ -67,11 +75,12 @@ export const usePurchaseStore = defineStore('purchase', () => {
       PURCHASE_CALLBACK.toString(),
       [{
         server: {
-          ...serverStore.serverPurchasePayload,
+          ...serverPurchasePayload.value,
         },
         type: 'renew',
       }],
-      serverStore.inIframe ? 'newTab' : undefined,
+      inIframe.value ? 'newTab' : undefined,
+      sendType.value,
     );
   };